代码之家  ›  专栏  ›  技术社区  ›  Arkadiusz Kałkus

Vue组件可以同时具有数据和属性吗?

  •  0
  • Arkadiusz Kałkus  · 技术社区  · 8 年前

    Vue中组件的标准示例如下:

    Vue.component('blog-post', {
      // camelCase in JavaScript
      props: ['postTitle'],
      template: '<h3>{{ postTitle }}</h3>'
    })
    

    在关于组件的基本文档中,没有使用数据对象,只使用props。然而 documentation of data 提及组件:

    限制:仅在组件中使用时接受函数 定义。

    甚至还有一个例子:

    var data = { a: 1 }
    
    // direct instance creation
    var vm = new Vue({
      data: data
    })
    vm.a // => 1
    vm.$data === data // => true
    
    // must use function when in Vue.extend()
    var Component = Vue.extend({
      data: function () {
        return { a: 1 }
      }
    })
    

    这是否意味着组件可以同时拥有数据和属性?数据类型是私有财产(如果我们想比较OOP)还是公共财产?

    1 回复  |  直到 8 年前
        1
  •  0
  •   Karl-André Gagnon    8 年前

    组件可以同时具有 props data . 他们之间的区别是 道具 由父组件接收,而 数据 由组件操纵。属性是静态的(可由父级更改),而数据是动态的(但不能由父级更改)。

    子组件影响属性的唯一方法是发出事件。父组件可以监听这些事件,并在payload参数中接收和接收任何内容。在listener函数中,它们可以更改自己的数据,子属性也将被更新。这称为单向数据流:

    所有的属性在子属性和父属性之间形成一个单向向下的绑定:当父属性更新时,它将向下流到子属性,但不会反过来。这可以防止子组件意外地改变父级状态,从而使应用程序的数据流更难理解。

    Vue documentation

    这里有一个小模式,如果你是视觉的:

    enter image description here

    推荐文章