vue父子组件之间的传值 - 子向父传值

• 组件是可复用的 Vue 实例，且带有一个自行定义的名字：在这个例子中是 childTemplate
  此次为实现通过点击子组件内的按钮触发方法，将子组件的值传递给父组件使得父组件数据内容改变

  对于子组件向父组件传值用简单的话来说，就是父组件在子组件上使用v-on绑定自定义方法名，子组件使用$emit触发父组件绑定的的事件并且传值

在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件则是通过事件给父组件发送信息。
关于$emit的更多解释参考官网文档：vue 自定义事件

父组件代码内容

<template>
  <div id="app">
    <h2>这是父组件</h2>
    <p>在父组件内展示tableData的内容</p>
    <p>{{tips}}</p>
    <div class="parent">
      <div v-for="(item,key) in tableData" :key="key">
        <p>{{item.name}}</p>
        <p>{{item.date}}</p>
        <p>{{item.title}}</p>
      </div>
  </div>
  <br>
    <!-- 使用v-on(缩写@)在子组件上绑定父组件的方法 -->
    <childTemplate  @changeData =  changeData />
    <!--            ↑ 自定义名字   ↑ 父组件内方法名 -->
  </div>
</template>

<script>
// 引入子组件
import childTemplate from './views/children.vue'
export default {
  data(){
    return{
      tableData: [{
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }, {
            date: '2020-06-29',
            name: '王皮皮',
            title: '在家小霸王，出门小王八'
          }],
          tips:''
    }
  },
  // 组件注册
  components:{
    childTemplate
  },
  // 方法
  methods:{
    // 该方法传入两个参数改变原来的值
      changeData(data,tips){
        this.tableData = data
        this.tipe = tips
      }
  }
}
</script>
<style scoped>
    #app {
      width: 1000px;
      margin: 0 auto;
    }
    .parent{
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .parent div{
    width: 160px;
    height: 150px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
  }
</style>

子组件代码内容

• 子组件通过$emit触发父组件上绑定的方法

<template>
  <div class="child-content">
  这是子组件的内容  <i>（灰色背景部分）</i>
  <p>通过点击子组件内触发父组件的方法改变父组件的值</p>
  <br>
  <button @click="changeData">点击改变父组件的数组内容</button>
  </div>

</template>

<script>

export default {
  methods:{
    changeData(){
        // 使用$emit触发当前实例上的事件。附加参数都会传给监听器回调。
        let data = [{
            date: '2020-07-01',
            name: '王皮皮',
            title: '正式的拥有一个家'
        }]
        // 使用$meit调用父组件在子组件上绑定的自定义方法changeData,并且传入两个参数
        this.$emit('changeData',data,'数组改变了')
    }
  }
}
</script>
<style scoped>
  .child-content{
    width: 1000px;
    padding: 20px;
    background-color: #f1f1f1;
  }

</style>

以上代码运行示例图

点击按钮前

点击按钮后