父子组件传值的问题,上面前面文章中已经讲过,不再赘述，这里来总结一下非父子组件传值的几种方式。
非父子组件间传值
1.通过父组件实现兄弟组件间互相传值
父组件
<template>
<div id="app">
<HelloWorld/>
<goodbye/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import goodbye from './components/goodbye.vue'
export default {
name: 'App',
components: {
HelloWorld,goodbye
},
}
</script>
子组件HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<span v-if="number">{{msg}}goodbye告诉我是{{number}}</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg:"我是HelloWorld组件",
number:"",
}
},
created () {
this.$parent.$on('wa',(e)=>{
this.number=e;
})
}
}
</script>
子组件goodbye
<template>
<div class="goodbye" @click="children1">
<h1>{{ msg2 }}</h1>
</div>
</template>
<script>
export default {
name: 'goodbye',
data() {
return {
msg2:"我是goodbye组件",
num:1,
}
},
methods: {
children1() {
this.$parent.$emit('wa',this.num++);
}
},
}
</script>
2.祖先组件向后代组件传值——provide 和 inject (主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
使用场景:祖先代给后代传值，反过来不成立
祖先组件app.vue
<template>
<div id="app">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
provide(){//祖先向后代传值
return {foo:this}
},
data() {
return {
ces:"测试",
}
},
components: {
HelloWorld
},
}
</script>
helloword.vue组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<goodbye/>
</div>
</template>
<script>
import goodbye from "./goodbye";
export default {
name: "HelloWorld",
components: {
goodbye
},
data() {
return {
msg: "我是HelloWorld组件",
number: ""
};
}
};
</script>
goodbye组件
<template>
<div class="goodbye">
<h1>{{ msg2 }}-{{foo.ces}}</h1>
</div>
</template>
<script>
export default {
name: 'goodbye',
inject:['foo'],
data() {
return {
msg2:"我是goodbye组件",
}
},
}
</script>
从以上可以看出app.vue和goodbye.vue是非父子组件，切记此方式只能是在祖先组件向后代传值。
3.任意两个组件间传值
创建一个Bus类负责事件派发，监听和回调管理(类似于上文1中的$parent);
1）创建一个单独的vue实例，并暴露出去。bus.js
import Vue from "vue";
let Bus=new Vue();
export default Bus;
2）helloworld.vue组件里进行事件派发
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<span @click="emitnews">点击我</span>
</div>
</template>
<script>
import Bus from '../bus.js';
export default {
name: "HelloWorld",
data() {
return {
msg: "我是HelloWorld组件",
num:1
};
},
methods: {
emitnews() {
Bus.$emit("add",this.num++);
}
}
};
</script>
2)goodbye.vue组件里进行事件监听
<template>
<div class="goodbye">
<h1>{{ msg2 }}</h1>
<span>{{number}}</span>
</div>
</template>
<script>
import Bus from "../bus.js";
export default {
name: "goodbye",
data() {
return {
msg2: "我是goodbye组件",
number:"",
};
},
created() {
Bus.$on("add", e => {
console.log(e);
this.number=e;
});
}
};
</script>
4.父子组件传值除了以上方法外，还有vuex方法，即创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。
本文均为荣益互联摘自权威资料，书籍，文章，或来自网络，如有版权纠纷或违规问题，请联系我们删除。我们欢迎您的分享，谢绝直接抄袭复制。感谢…
