vue组件的使用及通信

子组件给父组件传值$emit

子组件

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

父组件
html

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

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

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

component标签的使用
html

  A
  B
  C
  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;
	    },
  }
}