3.vue3 组件 父组件传值给子组件

组件(component)

可以复用的页面的一部分

分类

全局组件

<div id="box">
        <One></One>
    </div>
    <script>
      let app =  Vue.createApp({
            data() {
                return {
                }
            },
        //    template:`<div>123 </div>`   //template的优先级比mount挂载元素高
        })
        //定义一个全局组件 ,组件里必须提供模板(template),提供组件的内容
        app.component("One",{
            template:`  
                    <div>我是全局组件one</div>
                `
        })
        app.mount("#box")

局部注册的组件

 //定义一个局部注册的组件 必须提供模板内容
        let twoCom =  Vue.defineComponent({
            template:`<div>局部注册的组件</div>`
          })
        Vue.createApp({
            components:{  //注册组件
                twoCom
            },
            data() {
                return {
                }
            },
        }).mount("#box")

父组件传值给子组件

传值的时候 如果不绑定传过去的都是字符串，绑定了可以识别各种类型和变量

 <div id="box">
        <!-- 父组件是通过自定义属性把值传给子组件 -->
        <!-- 传值的时候 如果不绑定传过去的都是字符串，绑定了可以识别各种类型和变量 -->
        <Child v-bind:n="666" :v="v"></Child>
    </div>
    <script>
        //父组件传值给子组件
        let Child = {
            props:["n","v"],   //子组件通过props属性进行接收
            template:`<div>hello child {{n}} {{typeof n}} {{v}}</div>`
        }
        Vue.createApp({
            components:{
                Child
            },
            data() {
                return {
                    v:'hello'
                }
            },
        }).mount("#box")