vue基础「二」--组件间的通讯

1. 父子组件通讯：props 和 $emit

父组件 index.vue

• 给子组件 Input 传递事件 addHandler
• 给子组件 List 传递数据list、事件 deleteHandler

<template>
  <div>
    //传递 addHandler事件
    <Input @add="addHandler"/>
    //传递 list数据、deleteHandler事件
    <List :listFather="list" @delete="deleteHandler"/>
  </div>
</template>

<script>
//引入子组件
import Input from './Input'
import List from './List'
export default {
  //注册子组件
  components:{
    Input,
    List
  },
  data() {
    return {
      list:[
        {
          id:"id 1",
          title:"标题 1"
        },
        {
          id:"id 2",
          title:"标题 2"
        },
      ]
    };
  },
  methods: {
    addHandler(title){
      this.list.push({
        id:`id-${Date.now()}`,
        title
      })
    },
    deleteHandler(id){
      this.list=this.list.filter(item=>item.id!=id)
    }
  },
};
</script>

子组件 Input.vue

• 通过$emit调用父组件的 add事件 并传值

<template>
  <div>
    <input type="text" v-model="title">
    <button @click="addTitle">add</button>
  </div>
</template>

<script>
import event from './event'
export default {
  data() {
    return {
      title:""
    };
  },
  methods: {
    addTitle(){
      //调用父组件的事件
      this.$emit('add',this.title)
    }
  },
};
</script>

子组件 List.vue

• 通过props获取到父组件传的数据listFather
• 通过$emit调用父组件的 delete事件 并传值

<template>
  <div>
    <ul>
      <li v-for="item in listFather" :key="item.id">
        {{item.title}}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import event from './event'
export default {
  props:{
    // 定义类型和默认值
    listFather:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    deleteItem(id){
      this.$emit('delete',id)
    },
  },
};
</script>

2. 组件间通讯：自定义事件

实现组件input 和 组件 List之间的通讯

① 新建文件event.js 实例一个vue对象
② 两个组件分别引入该实例
③ 通过绑定自定义事件，调用自定义事件实现组件间的通讯

组件List.vue

• 绑定自定义事件onAddTit
• 在deforeDestroy钩子中销毁 自定义事件onAddTit，防止造成内存泄露

<template>
  <div>
    <ul>
      <li v-for="item in listFather" :key="item.id">
        {{item.title}}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import event from './event'
export default {
  data() {
    return {
      listFather:[]
    };
  },
  mounted() {
    //绑定自定义事件
    event.$on('onAddTit',this.addTitHandler)
  },
  deforeDestroy(){
    //及时销毁，负责可能造成内存泄露
    event.$off('onAddTit',this.addTitHandler)
  },
  methods: {
    addTitHandler(title){
      listFather.push(title)
    }
  },
};
</script>

组件 Input.vue

• 调用在List组件中绑定的自定义事件 onAddTit

<template>
  <div>
    <input type="text" v-model="title">
    <button @click="addTitle">add</button>
  </div>
</template>

<script>
import event from './event'
export default {
  data() {
    return {
      title:""
    };
  },
  methods: {
    addTitle(){
      //调用自定义事件
      event.$emit('onAddTit',this.title)
      this.title=''
    }
  },
};
</script>