Vue中props的详解（子组件引用父组件的数据）和父组件引用子组件数据this.$emit()方法

父子组件

当一个vue中引入另一个vue组件，被引入的称为子组件。

子组件引用父组件的数据

props的详解

父组件引用子组件的数据

子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了

而子组件也可以通过$emit(‘input’,false)，去改变父组件中v-model 和 子组件中 value 的值 。

当父组件想要使用子组件的数据的时候，采用事件机制携带数据

1. 在子组件中触发某一个事件
2. 在事件触发的方法中调用this.$emit()方法this.$emit(“事件名称自己定义”,携带的数据变量)

<el-tree
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    ref="menuTree"
    @node-click="nodeclick"
  ></el-tree>
 
 nodeclick(data, node, component) {
        //将子组件数据通过事件携带给父组件
        this.$emit("tree-node-click",data, node, component);
    },

3. 在父组件中引用子组件的标签上添加自定义的事件，并绑定一个方法

		<!-- 引用子组件中自己定义的事件 -->
        <Category @tree-node-click="treenodeclick"></Category>

4. 在父组件中写方法，并接收子组件传递过来的数据。

treenodeclick(data, node, component){
      console.log("父组件调用子组件category：",data, node, component);
    },