Vue基础 の 组件 父 --> 子 de传值

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>