搞懂Vue父子组件

首先明确区分一下父子组件：
A.vue文件被B.vue导入并且注册使用了，则：B是父组件，A是子组件。父子组件之间数据传递只能自上往下传递，即通过Prop：父—>子（B---->A）

此例中PkTable.vue为子组件App.vue为父组件

看代码：

//父组件传值(App.vue) 静态的值
<PkTable data="aaaaaa"></PkTable>
//父组件传值 动态的值
<PkTable :data="parentData"></PkTable>

<script>
import PkTabel from '@/components/PKATMRecord/PKTabel.vue';
export default {
  name: 'App',
  data(){
    return {
      parentData:"这是父组件的数据"
    }
  },
  components: {
    PkTabel
  },
  }
</script>


//子组件接收（PkTable.vue）
<h1>{{parentData}}</h1>

export default {
  name: 'HelloWorld',
  props: {
    parentData: String,
  }
}

子---->父传值（this.$emit）通过触发父组件的事件来传值说明：每个vue实例都实现了事件接口：使用$on(eventName)监听事件，使用$emit触发事件。另外，父组件可以在使用子组件的地方直接使用v-on来监听子组件触发的事件。

//子组件
<button @click.stop="changParent">按钮</button>

methods:{
  changParent(){
  this.$emit('childFn','childData')
 }
}

//父组件
<PkTable :data="parentData" @childFn="parentMethod"></PkTable>

methods:{
  parentMethod(msg){
  	console.log(msg);  //'childData'
 }
}