- 在子组件标签上添加一个属性(ppp)
- 在子组件中通过 props 属性,来接受这个数据
- 就可以使用接受到的 ppp 数据了
<!-- 父组件的模板 -->
<div id="app">
<!-- 子组件的模板 -->
<hello ppp="18" gender="male" :parent-msg="msg"></hello>
</div>
<script src="./vue.js"></script>
<script>
// 1 父到子
// 父组件:vm实例
// 子组件:hello组件
const vm = new Vue({
el: '#app',
data: {
msg: '这是 Vue 实例提供的数据'
},
components: {
hello: {
template: `
<div>这是 Hello 子组件 -- {{ ppp }} | {{ gender }} | {{ parentMsg }}</div>
`,
// 通过 props 属性,来指定该组件接受的数据
// props 的使用方式与 data 相同
props: ['ppp', 'gender', 'parentMsg']
}
}
})
</script>