标签：ret 生命周期 exp content 通讯 view 知识 template style
本片文章将为您详细讲解在Vue中，父给子传值、子给父传值以及兄弟之间传值方式!
父传子；父组件
// template里面
<aa :info="name"/>
// script里面
import aa from ‘./aa.vue‘
components:{
aa
},
data(){
return{
name : ‘小明‘
}
}
父传子；子组件
// template里面 {{info}} // script里面 export default { props :[‘info‘] }
需要注意的是，父组件传值给子组件，如果子组件不需要修改父组件的参数，可以使用这种方式！如果子组件要修改父组件中的参数，父组件必须用引用类型的参数传给子组件！
子传父；父组件
// template里面 @info是父子之间通讯 <app @info="change" /> // script里面 import app from ‘./views/app.vue‘ methods:{ // 接受子组件传过来的参数； change(z){ console.log(z) } }
子传父；子组件
// temolate里面 <el-button @click="change() ;aa()">我是子组件</el-button> // script里面 methods:{ change(){ this.$emit(‘info‘,‘我是儿子，传值给父亲‘) } }
兄弟之间传值使用的是$bus的传值方式，具体配置如下
同目录下创建bus.js
// bus.js中只需要写这么多就ok export default { install(Vue){ Vue.prototype.$bus = new Vue({}); } };
main.js中需要引入bus.js文件！
// 在main.js中引入创建好的bus.js文件 import bus from ‘./bus.js‘; Vue.use(bus); new Vue({ el: ‘#app‘, render(h){ return h(App); } });
配置完成开始书写传值代码;
兄弟传值；传值方
<button @click=" $bus.$emit(‘info‘,‘哈哈‘)">点击兄弟传值</button>
兄弟传值；接受方
// 直接使用生命周期来接受,可以赋值给其他参数！ created(){ this.$bus.$on(‘info‘,data =>{ console.log(data) }) }
如果喜欢我的文章，请关注下微信公众“前端伪大叔”！我将不定期为您发布各种前端重要知识点！谢谢
标签：ret 生命周期 exp content 通讯 view 知识 template style
原文地址：https://www.cnblogs.com/webfy/p/11217260.html
