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

Posted 2022-04-28 webfy

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

如果喜欢我的文章，请关注下微信公众“前端伪大叔”！我将不定期为您发布各种前端重要知识点！谢谢