Vue3组件间父子传值：插槽、props与emits实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47240739/article/details/125175137

vue3组件传值

父传子：

1.插槽传值

在子组件模板中加入

<slot></slot>

在父组件模板调用的子组件标签中

<my-com>直接输入文本内容</my-com>

2.props自定义属性传值

父组件在子组件里面定义一个动态绑定的属性 :data="fatherData"

<my-com :data="fatherData"></my-com>

然后在子组件父传子的自定义属性在props中声明

  props:['data'],//父传子的自定义属性在props中声明
      //然后在setup函数里面传入参数props，在里面即可以调用
console.log(props,props.data);

子传父：

emits自定义事件传值

首先在子组件模板里面emits属性里面声明传值的事件名称

 emits:["myEvent"],//子传父的自定义事件在emits中声明

然后在setup的第二个参数context里面调用事件emit发射

 context.emit("myEvent","子组件数据")//事件名，传入数据

然后在子组件模板里面加入事件

 <my-com  @my-event="getInfo"></my-com>

在父组件里面定义函数getInfo，函数的参数就是传入的数据

 setup() {
              function getInfo(data){
                console.log("父组件接收到了子组件数据",data);
              }
              return{
                  getInfo
              }
            }

附源码

<body>
    <script src='https://unpkg.com/vue@next'></script>
    <div id='myApp'>
        <my-com :data="fatherData" age="99" @my-event="getInfo">插槽数据</my-com>
    </div>
    <template id="mytemp">
        <!-- vue要求组件模板有且只有一个根标签，vue3可以有多个根标签 -->
        <div>这组件是子组件</div>
        <input type="text">
        <button>点我</button>
        <slot></slot>
        <b>{{data}}</b>
    </template>
    <script>

        var myCom = {
            template:'#mytemp',
            props:['data'],//父传子的自定义属性在props中声明
            emits:["myEvent"],//子传父的自定义事件在emits中声明
            setup(props,context) {
                // setup函数的第一个参数就是props字段传值
                console.log(props,props.data);
                // setup函数的第二个参数是context，上下文对象，并不是当前组件对象,其中attrs这个字段用于接收没有在props字段声明的属性(会有警告，但是不会报错)
                console.log(context,this);
                // context对象的emit字段用于子传父发射自定义事件，事件名可以用小驼峰,绑定时用小写
                context.emit("myEvent","子组件数据")
                return{
                    
                }
            }
        }
        var vm = { 
            components:{
                myCom 
            },
            setup() {
              const fatherData = Vue.ref('父组件数据')
              function getInfo(data){
                console.log("父组件接收到了子组件数据",data);
              }
              return{
                  fatherData,
                  getInfo
              }
            }
        } 
        Vue.createApp(vm).mount('#myApp')

        // 总结：
        // 1.vue3中组件使用字面量方式创建，不再使用Vue.commponent（）
        // 2.vue3子组件创建后不能直接使用，需要在父组件的comments中注册才能使用
        // 3.vue3组件模板中可以有多个根标签
        // 4.vue3中父组件向子组件传值，插槽传值和props传值与v2基本一致
        // 5.vue3中子组件向父组件传值，用setup第二个参数调用emit发射自定义事件，事件名可以用小驼峰，在组件标签上绑定时用小写
        // 6.vue3子组件向父组件传值发射的自定义事件名需在emits字段中声明，否则有警告
    </script>
</body>