Vue3 CompositionAPI 组合式API 子组件向父组件传递数据（通信）

标签：asc   http   png   set   export   getc   模板   pos   mit   

Vue3 CompositionAPI 组合式API 子组件向父组件传递数据（通信）

传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：attrs,slots和emits，其中emit就是Vue2中的$emit方法

现在使用Vue3风格和组合式API方式完成，
假设父组件为Collection.vue，子组件为NavBar.vue(注册模板后写作)
那么需要在子组件NavBar.vue中定义

<script>
export default {
  name: "NavBar",
  emits:[‘todata‘], /*定义列表*/
  , setup(props,ctx) {
  const params = {
        user:"ylw"
      };
      ctx.emit("todata", params); //暴露的事件和传递的参数
}
<script>

在父组件Collection.vue中这样写

<templatet>
  <div>
    <nav-bar @todata="getChildData"></nav-bar> /*父组件接收到事件和参数并且使用方法承接*/
  </div>
</template>
<script>
export default{
   name: "Collection",
   setup(){
       const getChildData = (params)=>{
           console.log(params);
      }
      return {getChildData}
   }

</script>

加载Collection组件后显示在控制台显示子组件中取到的数据：

注意，在父组件的template域仍然可以支持使用$emit方法分发事件

Vue3 CompositionAPI 组合式API 子组件向父组件传递数据（通信）

标签：asc   http   png   set   export   getc   模板   pos   mit   

原文地址：https://www.cnblogs.com/caozhenfei/p/14491983.html