4.初识Vue组件化应用构建

文章目录

  • 介绍
  • 例子一:组件
  • 例子二:父子组件传递数据

介绍

下边的话摘抄自Vue官网

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:
4.初识Vue组件化应用构建_第1张图片
在 Vue 中注册组件很简单:如对 App 对象所做的那样创建一个组件对象,并将其定义在父级组件的 components 选项中

例子一:组件

搞个简单的例子体会一下组件化是啥


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件化title>
    <script src="https://unpkg.com/vue@next">script>
head>

<body>
    <div id="test">
        <ol>
            <todo-item>todo-item>
        ol>
    div>
body>

<script>
    const app = Vue.createApp({
      })
    app.component('todo-item', {
      
        template: '
  • 这是todo
  • '
    }) app.mount('#test')
    script> html>

    4.初识Vue组件化应用构建_第2张图片
    其实就是把一些页面的组成部分抽取出去了,形成组件,组件的好处是可以复用。

    例子二:父子组件传递数据

    然后再来一个复杂一点的例子,把父组件的数据传给子组件。

    注意点

    • 组件除了可以接受一个模板之外,还可以接受一个参数列表。
    app.component('todo-item', {
         
    	// 参数列表
        props: ['todo'],
       	// 模板
        template: '
  • { { todo.text }}
  • '
    })
    • 使用 v-bind 指令将数据传给子组件的参数,实现数据传递给子组件。
    <div id="todo-list-app">
      <ol>
         
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        >todo-item>
      ol>
    div>
    

    完整代码看一下:

    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>传递数据title>
        <script src="https://unpkg.com/vue@next">script>
    head>
    
    <body>
        <div id="todo-list-app">
            <ol>
                <todo-item v-for="(item, index) in groceryList" v-bind:todo="item" v-bind:key="item.id">todo-item>
            ol>
        div>
    body>
    
    <script>
        const TodoList = {
          
            data() {
          
                return {
          
                    groceryList: [{
          
                        id: 0,
                        text: "雪碧"
                    }, {
          
                        id: 1,
                        text: "可乐"
                    }, {
          
                        id: 3,
                        text: "火腿肠"
                    }]
                }
            }
        }
    
        const app = Vue.createApp(TodoList)
    
        app.component('todo-item', {
          
            props: ['todo'],
            template: '
  • { { todo.text }}
  • '
    }) app.mount('#todo-list-app')
    script> html>

    效果如下(黑框是图片效果,主要看内容的展示):
    4.初识Vue组件化应用构建_第3张图片

    你可能感兴趣的:(#,Vue,vue)