1、父组件向子组件传值

使用props来接受值

父组件parent

<template>
  <div>
    <div>父组件</div>
    <div>发送给第一个子组件的信息是:{{msg}}</div>
    <div>
      <div id="child1">
      	#子组件定义msg，接收传入的msg
        <ChildOne :msg="msg" />
      </div>
    </div>
  </div>
</template>

<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data() {
    return {
      msg: "我是父组件，向子组件发消息",
    };
  }
};
</script>

复制代码

上述代码中，父组件给第一个子组件childone传入msg，childone需定义一个msg用来接受传入的msg值。

第一个子组件childn1

<template>
  <div>
    <div id="title">第一个子组件</div>
    <div>接受到的父组件的消息是：{{msg}}</div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  }
};
</script>

复制代码

2、子组件向父组件传值

使用$emit将想要传递的值通过函数的形式传出，并在父组件中接收

第二个子组件children2

<template>
  <div>
    <div id="title">第二个子组件</div>
    <div>要发送给父组件的值：{{msg}}</div>
    <button @click="toParent">向父组件发送信息</button>
  </div>
</template>

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

复制代码

button绑定一个点击事件，用来触发toParent方法，toParent方法中使用$emit(‘toParent’, date)绑定需要传递给父组件的值，然后在父组件中使用@toParent=’method’接收，并获得$emit返回值。

父组件parent

<template>
  <div>
    <div>父组件</div>
    <div>即将接收第二组件传值是：{{child2Msg}}</div>
    <div>
      <div id="child2">
        <ChildTwo @toParent="getMag" />
      </div>
    </div>
  </div>
</template>

<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data() {
    return {
      child2Msg: ""
    };
  },
  methods: {
    getMag(msg) {
      this.child2Msg = msg;
    }
  }
};
</script>

复制代码

ps：父组件@xxx的xxx名称要和子组件this.$emit(‘xxx’, date)的xxx名称相同。

3、非父子组件（兄弟组件）传值

需引入中间值解决，此处用bus。在vue的main.js文件中，使用Vue.prototype.bus=new Vue()定义bus，声明中间量

第一个子组件（从这一组件向另一组件传值）

<template>
  <div>
    <div id="title">第一个子组件</div>
      要给第二个兄弟发信息，内容是：
      <input type="text" v-model="to" />
    </div>
    <button @click="toBrother">点我给兄弟传值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      to: "hi, brother"
    };
  },
  methods: {
    toBrother() {
      this.bus.$emit("toBrother", this.to);
    }
  }
};
</script>

复制代码

ps：与子组件向父组件传值类似，使用$emit传递。

第二个子组件（用来接受的组件）

<template>
  <div>
    <div id="title">第二个子组件</div> 
    <div>得到的兄弟组件信息是：{{get}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      get: ""
    };
  }
  beforeCreate() {
    this.bus.$on("toBrother", msg => {
      this.get = msg;
    });
  }
};
</script>

复制代码

第二个子组件通过beforeCreate声明周期来获得接收的值，用this.bus.o n 实 现 ， 第 一 个 参 数 是 t h i s . b u s . on实现，第一个参数是this.bus.on实现，第一个参数是this.bus.emit定义的方法名，第二个参数是一个方法（带返回参数的方法，一般使用箭头函数）。
ps：
也可创建一个全局的vue实例，并在需要传递的组件中引用该实例
创建路径：@root/utils/event-bus.js

import Vue from "vue"
export default new Vue()

复制代码

第一个子组件

<template>
  <div>
    <div id="title">我是第一个子组件</div>
      我要给第二个兄弟发信息，内容是：
      <input type="text" v-model="to" />
    </div>
    <button @click="toBrother">点我给兄弟传值</button>
  </div>
</template>

<script>
import event from '@root/utils/event-bus';
export default {
  data() {
    return {
      to: "hi, brother"
    };
  },
  methods: {
    toBrother() {
      event.$emit("toBrother", this.to);
    }
  }
};
</script>

复制代码

第二个子组件

<template>
  <div>
    <div id="title">我是第二个子组件</div> 
    <div>我得到的兄弟组件信息是：{{get}}</div>
  </div>
</template>

<script>
import event from '@root/utils/event-bus';
export default {
  data() {
    return {
      get: ""
    };
  }
  beforeCreate() {
    event.$on("toBrother", msg => {
      this.get = msg;
    });
  }
};
</script>

复制代码