组件化应用的构建

组件化应用允许我们使用小型、独立和通常可复用的组件构建大型应用。

Vue注册组件

Vue.component('todo-item',{template:'<li>这是个待办项</li>'})

根据其构建另一个模板

<ol>

    <todo-item></todo-item>

</ol>

但是这样只能渲染出同样的文字，我们应当将父作用域的值传到子组件中去

Vue.component('todo-item', {

  // todo-item 组件现在接受一个

  // "prop"，类似于一个自定义特性。

  // 这个 prop 名为 todo。

  props: ['todo'],

  template: '<li>{{ todo.text }}</li>'

})

使用v-bind指令将信息循环输出到每一个组件中

<div id="app-7">

    <ol>

        <todo-item v-for="item in groceryList"

        v-bind:todo="item"

        v-bind:key="item.id"

        <todo-item>

    </ol>

</div>

var app7=new Vue({

    el:'app-7',

    data:{

        groceryList:[

            {id:0,text:'蔬菜'},

            {id:1,text:'奶酪'},

            {id:2,text:'随便其他人吃的东西'}

        ]

    }

})

在大型应用中，有必要将整个应用程序划分为组件，使得开发更容易管理。假设例子为:

<div id="app">

  <app-nav></app-nav>

  <app-view>

    <app-sidebar></app-sidebar>

    <app-content></app-content>

  </app-view>

</div>

Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。

巴特西

Vue.js官方文档学习笔记(二)组件化应用的构建

组件化应用的构建

最新文章

热门文章