深度剖析Vue中父给子、子给父、兄弟之间传值！

本片文章将为您详细讲解在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) }) }

若是喜欢个人文章，请关注下微信公众“前端伪大叔”！我将不按期为您发布各类前端重要知识点！谢谢