vue 传值总结（结合项目）

结合之前总结的 https://www.cnblogs.com/maizilili/p/12402125.html

一、父子通讯

方法一：props—+ emit + .sync （该方法主要针对传递的数据，带有.sync修饰符，可反向操作数据）

父组件

<template>
      <div>
           <!-- 子组件-->
           <Child :tableData.sync="tableData"></Child>   //sync的意义在于实现双向数据绑定
      </div>
</template>
<script>
import Child from './Child '  //引入Child 子组件
export default {
  data() {
    return {
      tableData: ''
    }
  },
  components: {
    Child 
  }  
}
</script>

子组件

<template>
      <div>
           <p>我是子组件</p>
            <button @click="fn"></button>
      </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  props: {
    tableData:{
      type:Object,
      default:() => {}
    },
  },
  methods: {
      fn（）{
             
            //tableData改变后，这种写法可以更新父组件里边的tableData，最新值为newTableData
            this.$emit('update:tableData', newTableData)
      }
    
  }
}
</script>

#### 方法二：props + emit + 自定义事件（以前有总结，子组件传递自定义事件和参数给父组件，父组件进行监听，来改变数值）