<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- 相当于父组件 -->
<div id=‘father‘>
<!-- 1、子组件传参值 -->
<son sonname=‘李四‘></son>
</div>
<template id="son">
<div>
父组件 {{sonmsg}}
<!-- 3、使用接收到的值 -->
{{sonname}}
</div>
</template>
<script>
Vue.component(‘son‘, {
template: ‘#son‘,
// data使用返回值表示
data() {
return {
sonmsg: ‘父元素信息‘
}
},
// 2、props接受传值
props: {
// 1、单类型 表示接收的值为string类型
// sonname: String
// 2、多类型 表示接受的值类型可以为string或number
// sonname:[String,Number]
// 3、设置默认值
sonname:{
type:String,
// 设置默认值，这里没用到，在接口请求数据可能使用
// sonname:"张三"
}
}
})
const vm = new Vue({
el: ‘#father‘,
data: {
},
methods: {
},
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/myqinyh/p/15306085.html