Vue 组件之间传值

子组件部分

<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>