vue vue 父子组件之间通信的基本方式

先导语

本文主要是介绍下vue 父子组件之间通信的最基本的一种方式：通过props和$emit. 直接上代码： 父组件：

<template>
  <Input @addFn="addFn"/>
  <List :listData="listData" @deleteFn="deleteFn"/>
</template>

<script>
import Input from "./Input.vue";
import List from "./List.vue";
export default {
  components:{
    Input,List
  },
  data() {
    return {
      listData:['测试1','测试2'],
    }
  },
  methods:{
    addFn(value){
      this.listData.push(value)
    },
    deleteFn(index){
      this.listData.splice(index,1)
    }
  }
}
</script>

子组件1：

<template>
  <ul>
    <li v-for="(item,index) in listData" :key="'id'+index">
      {{item}}
      <button @click="deleteFn(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  props:{
    listData:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
    }
  },
  methods:{
    deleteFn(index){
      this.$emit('deleteFn',index)
    }
  }
}
</script>

子组件2：

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

<script>
export default {
  data() {
    return {
      msg:''
    }
  },
  methods:{
    add(){
      this.$emit('addFn',this.msg)
    }
  }
}
</script>

结果：

点击add时增加，点击删除时删除！

结束语

这里只讲了最基本的一种父子组件间的通信方式，后面我们还会讲到其他的组件间的通信方式。那么下次见，好好学习，天天向上！