vue组件的使用及通信

子组件给父组件传值$emit

子组件

mounted() {
	// 调用父组件@getFunction上绑定的getStruct方法，xxx为getFunction方法传的参
    this.$emit('getFunction',"xxx") 
},

父组件
html

<childNode  @getFunction="getStruct"></childNode>

script

import childNode from "@/components/childNode/childNode";
export default {
  components: {
    childNode,
  },
  data() {
	return {
		type:"",
	}
  },
  methods: {
		getStruct(type) {
		  // 子组件传的type赋值到父组件
		  this.type = type;
	    },
  }
}

父组件给子组件传值props

子组件

export default {
   // 接收父组件中传的值
   props:{
     result: {
       type: Object,
       default() {
          return {};
       }
     },
   },
}

父组件
html

<childNode :result="result"></childNode>

script

import childNode from "@/components/childNode/childNode";
export default {
  components: {
    childNode,
  },
  data() {
	return {
		result:{"123"},
	}
  },
}

父组件调用子组件的方法$refs

子组件

export default {
	methods: {
		changeData(res){
	      console.log(res,'changeData')
	    }
	}
}

父组件
html

<childNode ref="childNode"></childNode>

script

import childNode from "@/components/childNode/childNode";
export default {
  components: {
    childNode,
  },
 mounted() {
     // 调用childNode
     this.$refs.childNode.changeData(res);
 },
}

根据上面的实现来看，父组件给子组件传值也可以通过“父组件调用子组件的方法“这种来实现（将父组件的res值通过changeData传给子组件）

其实vue的组件数据通信方式有很多：

vuex、$parent与$children、prop、$emit与$on、provide和inject、$attrs与$lisenters、eventBus、ref

$parent的使用
子组件

this.$parent.getParentFunction(); // 调父组件方法
// 如果是父父组件，再多加个.$parent，以此类推
// this.$parent.$parent.getParentFunction(); 
this.$parent.xxx = false; // 设置父组件xxx字段的值（可能就是当前子组件props里面的某个值）

$children的使用

略：应该跟parent刚好是相反，在父组件里面通过$children调父组件方法或修改某个字段值

component标签的使用
html

<el-tabs v-model="currentTab" @tab-click="handleClick">
  <el-tab-pane label="A" name="a">A</el-tab-pane>
  <el-tab-pane label="B" name="b">B</el-tab-pane>
  <el-tab-pane label="C" name="d">C</el-tab-pane>
  <el-tab-pane label="D" name="d">D</el-tab-pane>
</el-tabs>
<keep-alive>
  <component :is="currentTab"></component>
</keep-alive>
<!--相当与-->
<!-- <a  v-show="currentTab=='a"/>
 <b  v-show="currentTab=='b'"/>
 <c v-show="currentTab=='c'"/>
 <d  v-show="currentTab=='d'"/> -->

script

import a from './pageA'
import b from './pageB'
import c from './pageC'
import d from './pageD'
export default {
  components: {
    a,
    b,
    c,
    d,
  },
  data() {
	return {
		currentTab:"a"
	}
  },
  methods: {
		handleClick(tab, event){
	      // this.currentTab = tab.label;
	      // this.currentTab = tab.name;
	    },
  }
}