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

若是喜歡個人文章，請關注下微信公衆「前端僞大叔」！我將不按期爲您發佈各類前端重要知識點！謝謝