vue.js - vue相关问题

问题描述

问 题

<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 接口实现了与父亲元素很好的解耦。

解决方案

子元素通过 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。

这篇关于vue.js - vue相关问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！