vue组件封装及父、子组件通信

1.封装子组件时:

• 首先对子组件需要的的数据进行整理
• 子组件名称使用 - 区别，使用div等标签包裹子组件模板内容
• 子组件的style文件加上scoped作用域
• 子组件添加props、data、methods等属性，数据由父组件传入子组件
• 子组件具体的事件处理逻辑应在父组件实现，因此在子组件使用this.$emit('inChange',index) 表示父组件监听 inChange事件，将index传至父组件，让父组件实现具体的事件处理逻辑

2.父组件引入子组件时

• 引入的组件名称使用驼峰，不能有 - ，使用:item :index等传入子组件所需数据
• 父组件使用@inChange="inChange"来实现处理逻辑，注意此处inChange后参数index可有可无，而在实现inChange函数时需要子组件传过来的参数index

3.一个简单的例子

子组件child.vue

<template>
  <div class="child">
    <v-switch v-model="item.in_switch" :label="item.in_switch? 'on':'off' " @change="inChange(index)"></v-switch>
  </div>
</template>
<script>

export default {
 	 props:{
        item: Object,
        index: Number
    },
    
    methods:{
        inChange(index){
            // 父组件监听 inChange事件，将index传过去，将处理逻辑放在父组件
            this.$emit("inChange",index);
        }
    }
}
</script>

父组件parent.vue

<template>
  <div class="parent">
	  // 注意这里inChange的参数可有可无
	  <child :item="item" :index="index" @inChange="inChange" />
  </div>
</template>
<script>
// @ is an alias to /src
import child from "../child";

export default {
  
  components: {
   child
  },
  data() {
	    return {
		    item: {
		          in_switch: true,
		        },
		    index: 0
	    }
	  },
  methods:{
    // inchange事件处理，有index参数
    inChange(index){
       console.log( index)
    },
  }
}
</script>