vue传值有哪8种方法

传值方式有：props和“$emit”、“$attrs”和“$listeners”、中央事件总线、v-model、provide和inject、“$parent”和“$children”、vuex和localStorage/session。

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

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

• props和$emit(常用)

• $attrs和$listeners

• 中央事件总线（非父子组件间通信）

• v-model

• provide和inject

• $parent和$children

• vuex

1、props和$emit

父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.

Vue.component('child',{    data(){      return {        mymessage:this.message      }    },    template:`      <div>        <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>    `,    props:['message'],//设置props属性值，得到父组件传递过来的数据    methods:{      passData(val){        //触发父组件中的事件，向父组件传值        this.$emit('getChildData',val)      }    }  })  Vue.component('parent',{    template:`      <div>        <p>this is parent compoent!</p>        <child :message="message" v-on:getChildData="getChildData"></child>      </div>    `,    data(){      return {        message:'hello'      }    },    methods:{      //执行子组件触发的事件      getChildData(val){        console.log(val)      }    }  })

在上面的例子中，有父组件parent和子组件child。

　　1)父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

　　2)子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

2、$attrs和$listeners

第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？ 如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有