385 组件：vue组件概述，组件化开发，组件的基本使用，组件的data是函数

一、组件

  • 组件可以看作是一些可复用的ui模块

    • 小到一个标签 ： <div>哈哈</div>
    • 大到一个页面 ：<div><div><div><div><div></div></div></div></div></div>

  • 一个组件对应 一个实例

  • 组件 === Vue实例 == new Vue ( options )

  • 官网 ： 组件是可复用的 Vue 实例

二、组件化开发

  • 概念 ：将一个完整的页面，抽离成一个个独立的组件，最终，通过这一个个独立组件完成整个的页面(项目)的功能
  • 组件化开发的优势/作用 ： 复用

三、组件的基本使用

先注册， 再使用

  • Vue 中的两种注册组件的方法

    1.全局注册

    2.局部注册

全局组件在所有的vue实例中都可以使用
局部组件在所有的当前实例中可以使用
  • 注册全局组件 - 基本使用
/**
 * 第一个参数 ： 组件名
 * 第二个参数 ： 是一个配置对象， 该配置对象与 Vue 实例的配置对象几乎完全相同
 *             也就是说，vue实例中用到的配置项，和组件中的配置项几乎相同
 */
Vue.component('child'， {
  template： `<h1 class="red">这是child组件</h1>`
})
  • 注意点
    • 注册全局组件也是放到 vm 实例之前
    • 模板只能有一个根节点
    • 组件的配置项和 vue 实例 的配置项一样 (如：data、methods、filters、watch、computed、钩子函数等)
    • 组件的 data 是一个函数 ， 并且返回一个对象
// 演示为什么vue在组件中的数据采用函数，而不是对象
// 原因 ： 只想让组件复用，不想让数据复用
var Component = function() {}
// 使用对象
Component.prototype.data = {
    demo： 123
}
// 使用函数
Component.prototype.data = function() {
    return {
        demo： 111
    }
}
var component1 = new Component()
var component2 = new Component()
component1.data().demo = '8888'
console.log(component2.data().demo) // 456
  • 使用组件
    • 当标签一样使用 <child></child>

demo：组件介绍.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
     组件
     1. 先注册
        - 全局组件： 所有的vue实例里都可以使用
        - 局部组件： 只能在当前注册组件的vue实例里使用
     2. 再使用 : 当成一个标签来使用
   -->

    <div id="app">
        <one></one>
    </div>
    <script src="./vue.js"></script>
    <script>
        //注册全局组件
        // 参数1 : 组件的名称
        // 参数2 : 组件的配置项 methods watch data computed 钩子函数
        Vue.component('one', {
            template: `<div>我是注册的组件</div>`,
            computed: {},
            watch: {},
            methods: {}
        })

        const vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

demo：组件的注意事项.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <two></two>
    </div>
    <script src="./vue.js"></script>
    <script>
        /**
         * 1. 注册组件要在 vm 实例之前注册
         * 2. template 只能有一个根节点
         * 3. 组件里的data 是一个函数  ,不是一个对象 (下次来讲为什么)
         */


        // 注册组件
        Vue.component('two', {
            template: `
                <div>
                    <h1>我是h1</h1>
                    <h1>我也是h1 {{ msg }}</h1>
                </div>
            `,
            data() {
                return {
                    msg: '123'
                }
            }
        })


        const vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

02-为啥【组件的】data是一 个函数，而不是一个对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <script>
        // 组件 : 复用
        // 我们想让组件复用,但是不想让组件里的数据复用

        // 组件构造函数
        const Component = function() {}

        // 原型上加数据
        // Component.prototype.data = {
        //   msg: '傻春'
        // }

        // 调用函数，返回对象，随便调用者怎么修改，都不影响原型上原来的函数里的对象
        Component.prototype.data = function() {
            return {
                msg: '傻春'
            }
        }

        // 实例化
        const c1 = new Component()
        const c2 = new Component()

        // 修改c1的数据
        c1.data().msg = '小傻春'

        // 获取c2 的数据
        console.log(c2.data().msg)
    </script>
</body>

</html>

四、改造 TodoMVC 成 组件化结构

  • 下载模板 todomvc-at-template + 安装css依赖包 + 清除不要的 + 安装 vue + 实例化
  • 创建一个 components 文件夹
  • 具体步骤
    • 创建一个 todo-head.js
    • 导入 <script src="./components/todo-head.js"></script>
    • 使用 <todo-head></todo-head>

posted on 2020-03-20 07:45  冲啊！  阅读(290)  评论(0)  编辑  收藏  举报

导航