深度剖析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)
    })
}

如果喜歡我的文章，請關註下微信公眾“前端偽大叔”！我將不定期為您發佈各種前端重要知識點！謝謝