首先明确区分一下父子组件:
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. e m i t ) 通 过 触 发 父 组 件 的 事 件 来 传 值 说 明 : 每 个 v u e 实 例 都 实 现 了 事 件 接 口 : 使 用 emit)通过触发父组件的事件来传值 说明:每个vue实例都实现了事件接口:使用 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'
}
}