vue不相关组件传值,vue组件与组件之间传值

父组件获取子组件的属性，方法，元素 <div id="parent"> <user-profile ref="profile"></user-profile></div> var parent = new Vue({ el: '#parent' })// 访问子组件var child = parent.$refs.profile

子组件获取父组件的数据，方法

1：子组件使用props从父组件获取数据

<child message="hello!"></child> Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样，prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>{{ message }}</span>'})

双向绑定（.sync）
只用通过 this.$emit(‘update:activeId1’,1) 这种方式才能进行数据双向改变；

2：子组件通过v-on绑定自定义事件到父组件的方法，再通过$emit触发这个自定义事件；进而调用父组件事件

<div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter></div> Vue.component('button-counter', { template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') } },})new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } }}) 非父子组件通信（路由跳转以后不实用）

网说的太简单了，新手看完估计还是一脸懵逼。还有这个空的 Vue 实例放到哪里合适也值得商榷。这篇文章的目的就是用一个简单的例子让你明白如何用 Bus 来进行通信：

假设 bb 组件里面有个按钮，点击按钮，把 123 传递给 aa 组件

// 根组件（this.$root)new Vue({ el: '#app', render: h => h(App), data: { Bus: new Vue() }})

bb组件被触发事件

<button @click="submit">提交<button> methods: { submit() { // 事件名字自定义，用不同的名字区别事件 this.$root.Bus.$emit('eventName', 123) } }

aa组件内调用事件接受

{{value7}} data() { return { value7:'旧的', }; },// 当前实例创建完成可以就监听这个事件created(){ this.$root.Bus.$on('eventName', value => { this.print(value) })}, // 或者在updata中监听这个事件updated: function updated() { //do something after updating vue instance this.$root.Bus.$on('eventName', value => { this.print(value) })}，methods: { print(value) { this.value7=value }}, // 在组件销毁时别忘了解除事件绑定beforeDestroy() { this.$root.Bus.$off('eventName')},

路由跳转不改变的原因是eventName事件没有改变；eventName是事件而不是属性；

其他复杂情况请使用VUEX状态管理