vue相关问题

Question

<div id="app-7">
  <ol>
    <!--
    Now we provide each todo-item with the todo object
    it's representing, so that its content can be dynamic
    -->
    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

这只是一个假设的例子，但是我们已经将应用分割成了两个更小的单元，子元素通过 props 接口实现了与父亲元素很好的解耦。

请问这里要如何理解这句话呢

子元素通过 props 接口实现了与父亲元素很好的解耦。

Answer 1

子元素通过 props 接口实现了与父亲元素很好的解耦。

这句话里面的关键词是解耦和props。
解耦的意思是父子组件可以独立使用，也就是说当再另外一个业务中需要用到子组件，不需要同时使用父组件。 在上面的例子中，只需要如下代码就可以使用子组件：

<todo-item :todo="{text:123}"></todo-item>

所以说，这样的写法中，父子组件是解耦的。

关于props，props是Vue中约定的往组件中传递外部数据的方式。比如代码：

<todo-item :todo="{text:123}"></todo-item>

HTML标签中的todo属性机会传递到todo-item中，当前，前提是component中声明了props。
通过这种方法，就可以由外部控制一些组件的特性。
那最常见的例子就是HTMl中的style属性，就可以理解成一个props。

Answer 2

解耦，解耦嘛，顾名思义，就是没有耦合在一起。子组件不直接依赖父组件里面的数据，但是父组件又要给子组件传值，那么怎么办，就定义 props。相当于一个接口。父组件通过 props 给子组件传值，子组件并不关心，也不能够控制父组件传递下来什么值，只知道会传下来一些数据。 这就实现了解耦。

Answer 3

https://vuefe.cn/guide/compon...构成组件

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”