• 技术文章 >web前端 >Vue.js

    vuejs如何设置父子通信

    青灯夜游青灯夜游2021-09-06 15:26:46原创125

    vuejs设置父子通信的方法:1、父组件利用props向子组件传递数据;2、子组件通过“$emit”给父组件发送消息;3、利用“.sync”语法糖;4、利用“$attrs”和“$listeners”;5、利用privide和inject。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    Vue 父子组件之间的通信有一下几种方式:

    下面将分别介绍

    1、 props

    这个在日常开发中运用较多,简单来说,我们可以通过props向子组件传递数据,就像一个水管一样,父组件的数据从上往下流向子组件,不能逆流。这也是vue的设计概论之单项数据流。

    <div id="app">
      <child :content="message"></child>
    </div>
    // Js
    let Child = Vue.extend({
      template: '<h2>{{ content }}</h2>',
      props: {
        content: {
          type: String,
          default: () => { return 'from child' }
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: 'from parent'
      },
      components: {
        Child
      }
    })

    2、$emit

    官方介绍是触发当前实例上得事件,附加参数都会传给监听器回调。

    <div id="app">
      <my-button @greet="sayHi"></my-button>
    </div>
    let MyButton = Vue.extend({
      template: '<button @click="triggerClick">click</button>',
      data () {
        return {
          greeting: 'vue.js!'
        }
      },
      methods: {
        triggerClick () {
          this.$emit('greet', this.greeting)
        }
      }
    })
    new Vue({
      el: '#app',
      components: {
        MyButton
      },
      methods: {
        sayHi (val) {
          alert('Hi, ' + val) // 'Hi, vue.js!'
        }
      }
    })

    3、.sync 修饰符

    在vue1.x的时候,曾作为双向绑定功能存在,即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念,所以在vue2.x中被去掉了,但是在vue 2.3.0+以上的版本中又从新引入了这个 .sync 修饰符。但是只作为一个编译时的语法糖存在。它被扩展为一个自动更新父组件属性的 v-on 监听器。

    在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

    语法糖的写法形式如下

    <text-document
        v-bind:title="doc.title"
        v-on:update:title="doc.title = $event">
    </text-document>

    于是我们可以用.sync 语法糖简写成如下形式

    <text-document v-bind:title.sync="doc.title"></text-document>

    那么如何做到双向绑定呢,例如改变子组件文本框中的值同时改变父组件中的值,代码如下

    <div id="app">
      <login :name.sync="userName"></login> {{ userName }}
    </div>
    
    let Login = Vue.extend({
      template: `
        <div class="input-group">
          <label>姓名:</label>
          <input v-model="text">
        </div>
      `,
      props: ['name'],
      data () {
        return {
          text: ''
        }
      },
      watch: {
        text (newVal) {
          this.$emit('update:name', newVal)
        }
      }
    })
    
    new Vue({
      el: '#app',
      data: {
        userName: ''
      },
      components: {
        Login
      }
    })

    代码里只有一句话:

    this.$emit('update:name', newVal)

    官方语法是:update:myPropName 其中 myPropName 表示要更新的 prop 值。当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果

    4、 $attrs 和 $listeners

    官网对 $attrs 的解释如下:

      包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

    官网对 $listeners 的解释如下:

      包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

    $attrs 和 $listeners 属性像两个收纳箱,一个负责收纳属性,一个负责收纳事件,都是以对象的形式来保存数据

    <div id="app">
      <child
        :foo="foo"
        :bar="bar"
        @one.native="triggerOne"
        @two="triggerTwo">
      </child>
    </div>
    let Child = Vue.extend({
      template: '<h2>{{ foo }}</h2>',
      props: ['foo'],
      created () {
        console.log(this.$attrs, this.$listeners)
        // -> {bar: "parent bar"}
        // -> {two: fn}
        // 这里我们访问父组件中的 `triggerTwo` 方法
        this.$listeners.two()
        // -> 'two'
      }
    })
    
    new Vue({
      el: '#app',
      data: {
        foo: 'parent foo',
        bar: 'parent bar'
      },
      components: {
        Child
      },
      methods: {
        triggerOne () {
          alert('one')
        },
        triggerTwo () {
          alert('two')
        }
      }
    })

    可以看到,我们可以通过 $attrs 和 $listeners 进行数据传递,在需要的地方进行调用和处理,还是很方便的。当然,我们还可以通过 v-on="$listeners" 一级级的往下传递,子子孙孙无穷尽也!

    5、privide 和 inject

    来看下官方对 provide / inject 的描述:

      provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    <div id="app">
    
      <son></son>
    
    </div>
    
    let Son = Vue.extend({
      template: '<h2>son</h2>',
      inject: {
        house: {
          default: '没房'
        },
        car: {
          default: '没车'
        },
        money: {
          // 长大工作了虽然有点钱
          // 仅供生活费,需要向父母要
          default: '¥4500'
        }
      },
      created () {
        console.log(this.house, this.car, this.money)
        // -> '房子', '车子', '¥10000'
      }
    })
    
    new Vue({
      el: '#app',
      provide: {
        house: '房子',
        car: '车子',
        money: '¥10000'
      },
      components: {
        Son
      }
    })

    更多列子可以参考element-ui源码,其中的大量使用了该方法

    相关推荐:《vue.js教程

    以上就是vuejs如何设置父子通信的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vuejs 父子通信
    上一篇:vue中如何监听vuex中的数据变化 下一篇:vuejs项目运行端口号哪里改
    线上培训班

    相关文章推荐

    • 一文讲解Vue中路由切换终止异步请求(附代码)• Uniapp自定义vue导航菜单组件完成菜单动态高亮• Vue this.$set为data中的某一对象添加一个属性• vue有哪三种传值方式• vue中如何监听vuex中的数据变化

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网