<div id="app">
<child-component :message="parentMessage"></child-component>
</div>
<script>
// 注册子组件
Vue.component('child-component', {
template: `
<div>
<p>{{message}}</p>
</div>
`,
props: {
message: {
type: String,
required: true
}
}
});
// 创建根 Vue 实例
new Vue({
el: '#app',
data: {
parentMessage: 'Hello from the parent!'
}
});
</script>
就是,定义组件child-component,和根组件挂载到vue上的div,然后根组件叫child-component组件去当儿子(子组件),通过组件名形成自定义标签来调用变成子组件,
要接受父组件传递到值,就要在子组件里定义props这个属性(props是定义在子组件中的一组属性,用于父组件向子组件传递数据。)在里面定义要接受父组件数据的属性名和接收数据的类型
props: {
message: {
type: String,
required: true
}
}
在上面父组件调用组件child-component成自己的子组件时,就把值通过父组件自己的属性 parentMessage传递给message在子组件里props里接收就好了,然后再渲染出来
template: `
<div>
<p>{{message}}</p>
</div>
`