父页面
‘<div class=“parent” @parentAction=“actionDetail”>
actionDetail(msg){
console.log(msg);
}’
子页面调用父页面的方法
this.$emit(“parentAction”,“我想说的话”)
父组件
<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的parentSay方法,调用自己的parentSayAction方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @parentSay="parentSayAction"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSayAction(msg){
console.log(msg) // hello, parent
}
},
// 引入子组件
components:{
children: Children
}
}
</script>
**
子组件
**
<template>
<div class="hello">
<div class="children" @click="childrenSay">
我是子组件
<div>
父组件对我说:{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
childrenSay(){
this.$emit('parentSay' , this.childrenSay);
}
}
}
</script>
父组件通过 prop 给子组件下发数据,
子组件通过$emit触发事件给父组件发送消息
父组件主动获取子组件的数据
1.this.$children用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是数组。
2.子组件的时候直接定义一个ref
<HelloWorld ref="hello" :message="message"></HelloWorld>
这样就可以通过this.$refs获取所需要的的数据
this.$refs.hello.属性
this.$refs.hello.方法
子组件主动获取父组件中的数据
1.this.$parent.属性
this.$parent.方法