vue兄弟组件传值有哪五种方法-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

五种方法为：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: '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>