子组件部分
<template>
<div class="child">
<div>
<p>子元素接收父元素值为: {{ msg }}</p>
<span @click="setUserName">子元素向父元素传值</span>
</div>
</div>
</template>
<script>
export default {
name: "homeHeader",
// 接收父组件的传值
props: {
msg: {
type: String,
default: "",
},
},
data() {
return {};
},
methods: {
setUserName() {
// $emit提交子元素, 第一个是方法(自定义的)第二个是参数,需要修改的值
this.$emit("setContent", "李四");
},
},
};
</script>
这是 header.vue 的 HTML 部分,msg是在 data 中定义的变量。
在 props 中添加了元素之后,就不需要在 data 中再添加变量了
父组件部分
<template>
<div>
<div class="title">vue组件间传值</div>
<div class="title">用户名为:{{ msg }}</div>
// 给header传值msg @setContent="setContent" 是子组件 $emit()提交的方法
<v-header :msg="msg" @setContent="setContent"></v-header>
</div>
</template>
<script>
import vHeader from "./components/header";
export default {
name: "home",
components: { vHeader },
data() {
return {
msg: "张三",
};
},
methods: {
// 处理子组件提交的方法,params是提交传递的参数
setContent(params) {
// 设置父元素的msg
this.msg = params
},
},
mounted() {},
};
</script>