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

2019-08-14 10:15:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 

原文链接:https://www.cnblogs.com/webfy/p/11217260.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:原生js实现放大镜效果

下一篇:想精通正则表达式 这几个正则表达式学习资料及工具你必须有!