Vue.js

Posted 2021-03-24 autumn-starrysky

上一篇地址：https://www.cnblogs.com/autumn-starrysky/p/11741230.html

五、组件化应用构建

　　组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

　　这一块是我目前看到的Vue的比较核心的部分，所以单独列出来进行整理。

　　在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。首先在 Vue 中注册组件：

// 定义名为 todo-item 的新组件
Vue.component(‘todo-item‘, {
  template: ‘<li>这是个待办项</li>‘
})

var app = new Vue(...)

　　现在我们可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

　　但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。

　　这就需要引入 props ：

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component(‘todo-item‘, {
  props: [‘todo‘],
  template: ‘<li>{{ todo.text }}</li>‘
})

var app7 = new Vue({
  el: ‘#app-7‘,
  data: {
    groceryList: [
      { id: 0, text: ‘蔬菜‘ },
      { id: 1, text: ‘奶酪‘ },
      { id: 2, text: ‘随便其它什么人吃的东西‘ }
    ]
  }
})

（看过前面的就知道这里依旧是图片哈哈哈，我还不知道怎么把我写的html传进来）

　　我的理解：首先定义了Vue新组件 todo-item ，然后自定义一个 props:[‘todo‘] 特性，通过 v-bind 将 todo 绑定在 v-for 中的 item上，通过 v-for来循环调用并显示 groceryList 中的元素。