vue组件传值
原文：vue组件传值--详细版 - 简书 (jianshu.com)
vue -- 父组件通过$refs获取子组件的值和方法_积少成多-CSDN博客_父组件获取子组件方法
1.父组件向子组件传值
一般会在子组件里面定义props来做接收，这是比较常见的情况
这是父组件
<template> <div> <div>我是父组件</div> <div>我发送给第一个组件的信息是:{{msg}}</div> <div> <div id="child1"> <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>
可以看到我在第一个子组件上面传入了一个msg,那么在子组件上就需要定义一个msg用来接收传进来的参数
这是第一个子组件
<template> <div> <div id="title">我是第一个子组件</div> <div>我接受到的父组件的消息是：{{msg}}</div> </div> </template> <script> export default { props: { msg: { type: String } } }; </script>
2.子组件向父组件传值
这时候就需要利用vue中的$emit将想要传递的值通过函数的形式传出，在父组件接收
this.$emit(arg1,arg2) arg1:方法名字，arg2:要传出的值
这是第二个子组件
<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的方法，这时候我们就要去父组件接收这个函数，它会带一个返回值，这个返回值就是我们需要从子组件传的值。
这是父组件
<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>
此时我在父组件里面定义了一个@toParent方法这个名称要和子组件里面this.$emit(arg1)的命名一样，用来接收。在getMag里面接收一个参数就是当前传回的值。
2.2父组件通过$refs获取子组件的值
注意事项
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！，所以它不是响应式的，不能用在模板或者计算属性中。
子组件 children.vue
// children.vue <template> <div>我是 children</div> </template> <script> export default { data: () => ({ sonData: '我是子组件的数据！' }), methods: { sonMethod() { console.log('我是子组件的方法！') } }, computed: { }, created() { } } </script>
父组件
// 父组件 <template> <div> <children ref='ch'> </children> <h1 @click="onclick">父组件</h1> </div> </template> <script> import children from './coms/children' export default { data() { return {} }, components: { children }, methods: { onclick() { // 或者 let chil = this.$refs['ch'] let chil = this.$refs.ch // 父组件可以通过$refs拿到子组件的对象 // 然后直接调用子组件的 methods里的方法和data里的数据 console.log(chil) //子组件对象 console.log(chil.sonData) // 我是子组件的数据 console.log(chil.sonMethod()) // 我是子组件的方法 } } } </script>
3.兄弟组件传值
兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue() 来定义，此时我们就有了一个中间量。
这是第一个子组件 -- 从这里向另外一个子组件传值
<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: "哈喽老二" }; }, methods: { toBrother() { this.bus.$emit("toBrother", this.to); } } }; </script>
在这里我在button上绑定了一个方法，在方法内部使用中间变量bus中的$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.$on来接收，第一个参数是this.bus.$emit定义的第一个方法名，第二个参数是一个方法，此方法带一个返回参数。在这里我使用箭头函数。
