vue学习笔记（组件）

川长思鸟来 2023-02-28 04:26 71阅读 0赞

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

  1. Vue.component('todo-item',{
  2.     template:'<li>这是自定义组件</li>'
  3. })

使用的话

  1. <ol>
  2.     <todo-item></todo-item>
  3. </ol>

上面这种方式每次文本都是一样的，我们可以定义一个参数

  1. Vue.component('todo-item', {
  2.   // todo-item 组件现在接受一个
  3.   // "prop"，类似于一个自定义 attribute。
  4.   // 这个 prop 名为 todo。
  5.   props: ['todo'],
  6.   template: '<li>{
  8.    { todo.text }}</li>'
  9. })
  11. <div id="app-7">
  12.   <ol>
  13.     <todo-item
  14.       v-for="item in groceryList"
  15.       v-bind:todo="item"
  16.       v-bind:key="item.id"
  17.     ></todo-item>
  18.   </ol>
  19. </div>
  21. var app7 = new Vue({
  22.   el: '#app-7',
  23.   data: {
  24.     groceryList: [
  25.       { id: 0, text: '蔬菜' },
  26.       { id: 1, text: '奶酪' }

发表评论

表情：
评论列表 （有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读