父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit改变父组件的值 。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;
父组件:
<template>
<div>
<p>{{name}}</p>
<button type="primary" size="mini" @click="submit">提交</button>
<!--子组件-->
<children
ref="ref"
:sendMsg="content"
@getValue="getSonVal"
></children>
</div>
</template>
<script>
import children from "./components/children.vue"; //引入子组件
export default {
components:{
children,
},
data() {
return {
name: "张三",
content:'我是从父组件传过来的',
}
},
methods: {
getSonVal(val) {
this.name = val;//将子组件传过来的值赋值给name
},
submit() {
this.$refs.ref.showName();
},
}
}
</script>
子组件:
<template>
<div class="box">
<p>{{sendMsg}}</p>
<button type="primary" size="mini" @click="showName()">刷新</button>
</div>
</template>
<script>
export default {
props:['sendMsg'],
data() {
return {
name: "李四",
}
},
methods: {
showName() {
this.$emit('getValue', this.name)
alert('我是子组件的方法')
}
}
}
</script>