vue-父子组件通信

vue-父子组件通信

子组件给父组件传值使用事件机制
子组件给父组件发送一个事件，这个事件携带数据。父组件感知到事件后处理。

子组件写法： this.$emit('event-name', ...data);

<template>
  <!-- 当触发点击事件时，我们通过向上传递事件进而传递数据 -->
  <el-tree
    @node-click="nodeClick"
    :default-expanded-keys="expandedKey"
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    ref="menuTree"
  >
  </el-tree>
</template>

<script>
export default {
  methods: {
    nodeClick(data, node, component) {
      // 向父组件发送事件，第一个参数为自定义的事件名，后面可以跟任意多的参数
      // 通过 this.$emit('event-name', ...param)
      this.$emit("tree-node-click", data, node, component);
    },
  },
};
</script>

父组件写法：通过在调用子组件的标签中绑定事件

<template>
  <!-- 此处绑定在子组件中自定义的的事件 -->
  <Category @tree-node-click="treeNodeClick"></Category>
</template>

<script>
export default {
  // 导出子组件
  import Category from "../common/category.vue";
  components: { Category }, // 所有属性都要注册到这里才能使用
  data() {
    return {};
  },

  methods: {
    // 感知树节点被点击，参数是 this.$emit('event', ...data); 中的data
    treeNodeClick(data, node, component) {
        // 此处获取到子组件通过传递事件而传递的数据
    },
  },
};
</script>