vue传值

父=>子传值

父往子传值，父组件需要在子组件标签内绑定，子组件用props接一下即可
父组件：

<template>
  <div id="parent">
    <input type="text" v-model="msg" />
    {{msg}}
    <Child :msg="msg"></Child>
  </div>
</template>

<script>
import Child from "./components/child";
export default {
  components: {
    Child
  },
  data() {
    return {
      msg: "父组件值传给子组件的值"
    };
  }
};
</script>

子组件

<template>
  <div>
    <div>子组件值:</div>
    {{msg}}
  </div>
</template>

<script>
export default {
  props: ["msg"]
};
</script>

子=>父传值

通过子组件$emit（arg1,arg2）函数，把值传出来。
arg1:方法名字（这个名字在父组件中需要保持一致）
arg2:要传出的值

这里也可以简写成@click="$emit('toParent',msg)"
子组件：

<template>
  <div>
    <div>我要发送给父组件的值：{{msg}}</div>
    <button @click="toParent">向父组件发送信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是子组件，我要给父组件传值",
    };
  },
  methods: {
    toParent() {
      this.$emit("toParent", this.msg);
    }
  }
};
</script>

父组件：

父组件可以通过$event来接受子组件传出来的值.

简单的写法为@toParent="msg = $event"

<template>
  <div id="parent">
    <input type="text" v-model="msg" />
    {{msg}}
    <Child :msg="msg" @toParent="getMsg"></Child>
  </div>
</template>

<script>
import Child from "./components/child";
export default {
  components: {
    Child
  },
  data() {
    return {
      msg: "父组件值传给子组件的值"
    };
  },
methods: {
    getMsg(msg) {
      this.$emit("toParent", this.msg);
    }
};
</script>

兄弟间传值