父子组件传值的精简步骤

父组件代码

html

 <selectEquipment 
 @alreadySelectEquipment="alreadySelectEquipment"  子组件传过来的事件,进行注册
 :compareList.sync="compareList" 传给子组件的值
 ></selectEquipment>

js

import selectEquipment from "./components/select-equipment.vue";//引入子组件
export default {
	components: { selectEquipment },//注册子组件
	data(){
		compareList:[],//传给子组件的值
		alreadyEquipment:[],
	},
 	methods: {
	    // 接收子组件的数据
	    alreadySelectEquipment(value){
	      this.alreadyEquipment=value;
	    }
	 },
}

子组件代码

js

export default {
	props:{
		compareList: Array,//接收父组件传过来的值
	},
 	methods: {
	   // 点击表格每一行的时候触发
    handdle(row) {
      let i = 0;
      this.alreadySelectEquipment.push({
        name: row.name,
        id: row.id,
        num: i + 1,
      });
      // 把值传给父组件
      this.$emit('alreadySelectEquipment',this.alreadySelectEquipment)
    },
  },
}

看懂了没baby,似不似超级简单呀,nice

父子组件传值的精简步骤

上一篇:深入解析vue脚手架export default{}(待更新)


下一篇:vuex的核心概念