vue的传值（子传父、父传子）

一、父传子
方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，可以使用 props 向子组件传递数据。
子组件代码如下:

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    msg: String
  }
};
</script>
<style scoped>
#container{
    color: blue;
    margin-top: 50px;
}
</style>

父组件的代码如下：

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Header :msg="text"></Header>
    </div>
</template>
<script>
import Header from "@/components/Header";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  },
  methods: {
    dataChange(data){
        this.msg = data
    }
  },
  components: {
    Header
  }
};
</script>
<style scoped>
</style>

二、子传父
子组件主要通过事件传递数据给父组件
子传父的实现方式就是用了 this.$emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.$emit 来遍历 getData 事件，最后返回 this.msg
子组件的代码如下：

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

父组件代码如下：

<template>
    <div id="container">
        <Header @getData="getData"></Header>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Header from "@/components/Header";
export default {
  data() {
    return {
      msg: "我要接收子组件的消息"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Header
  }
};
</script>
<style scoped>
</style>