Step1: 父组件调用 子组件 父组件通过 标签上的属性向子组件传值
Step2:子组件通过 props 接受父组件传送的属性,子组件便可以使用。
静态传值:
<script> const root = Vue.createApp({ template:` <div> <component—childer content='我是父组件传送的值啊'/> </div> ` }) root.component('component—childer',{ props:['content'], template:` <div>{{content}}</div> ` }) root.mount('#app') </script>
动态传值: v-bind
1. 通过data 定义数据 v-bind绑定传送数据
<script> const root = Vue.createApp({ data(){ return{ content:'我是父组件 传送的动态数据' } }, template:` <div> <component—childer :content='content'/> </div> ` }) //定义 全局组件 root.component('component—childer',{ props:['content'], template:` <div>{{content}}</div> ` }) root.mount('#app') </script>
2. props校验传送数据
props:{
xx:Sting,
xxx:Boolean
}
<script>
const root = Vue.createApp({
data(){
return{
content:'我是父组件 传送的动态数据'
}
},
template:`
<div>
<component—childer :content='content'/>
</div>
`
})
//定义 全局组件
root.component('component—childer',{
props:['content'],
template:` <div>{{content}}</div> `
})
root.mount('#app')
</script>