脚本宝典收集整理的这篇文章主要介绍了vue兄弟组件传值有哪五种方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

五种方法为：1、父组件向子组件进行传值；2、子组件向父组件进行传值；3、父组件中的标签上定义自定义事件，在事件内部获取参数；4、在子组件中触发自定义事件，并传参；5、通过公共组件Bus.js,进行传参。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

vue组件传值的五种方法：

1、父组件向子组件进行传值：

在子组件绑定父的数据，子组件通过PRops接受参数。

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users From "./components/Users"
export default {
  name: &#39;App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      tyPE:Array,
      required:true
    }
  }
}
</script>

2、子组件向父组件进行传值：

父组件内设置要传的数据『data(){ id: value}』

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

// 子组件
<template>
  <header>
    <h1 @click="changeTITle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3、父组件中的标签上定义自定义事件，在事件内部获取参数；

4、在子组件中触发自定义事件，并传参。（this.$ emit('父组件中的自定义事件',参数)）

5、通过公共组件Bus.js,进行传参

【相关推荐：《vue.js教程》】

以上就是vue兄弟组件传值有哪五种方法的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vue兄弟组件传值有哪五种方法全部内容，希望文章能够帮你解决vue兄弟组件传值有哪五种方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。