vue学习笔记-Vue的组件化编程__Vue.js
发布于 3 年前 作者 banyungong 1764 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

第二章 Vue的组件化编程

1.组件的基本认识(非单文件组件)

12.png

1.1 使用组件的三大步骤:

一、定义组件(创建组件)

使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别(el、data)

//第一步:创建student组件
const student = Vue.extend({
    template:`
    //模板里必须要用根元素包裹
        <div class="demo">
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
            <button @click="showName">点我提示姓名</button>   
        </div>
    `,
// el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
    data(){//必须写成函数形式
        return {
            studentName:'皓月',
            age:'20'
        }
    },
    methods: {
        showName(){
            alert(this.studentName)
        }
    },
})
二、注册组件

1.局部注册: 靠new Vue的时候传入components选项

//创建vm
new Vue({
    el:'#root',
    data:{
        msg:'你好啊!'
    },
//第二步:注册组件(局部注册)
    components:{
        //student:student的简写,key是组件名可以自己起 value是中转变量(组件地址)
        student,
    }
})

2.全局注册: 靠Vue.component(‘组件名’,组件)

Vue.component('student',student)
三、使用组件(写组件标签)
<div id='root'>
<!-- 第三步:编写组件标签 -->
<student></student>
</div>

1.2 Vue 组件 data 为什么必须是函数:

data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果—— 避免组件被复用时,数据存在引用关系。

1.3 关于组件

1.关于组件名:

一个单词组成:

  • 第一种写法(首字母小写):school
  • 第二种写法(首字母大写):School(与vue开发者工具相呼应)

多个单词组成:

  • 第一种写法(kebab-case命名):my-school

13.png

  • 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

备注:

(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

  • 第一种写法:<school></school>
  • 第二种写法:<school/>

备注: 不用使用脚手架时,<school/>会导致后续组件不能渲染。

3.一个简写方式:

const school = Vue.extend(options)简写为:const school = options

1.4 组件的嵌套

标准化开发:14.png

app全称application是vm的根组件,用来管理应用中所有组件

注意: 所有子组件要放在父组件之前

实例:

<body>
    <div id="root">
        <app></app>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //定义student组件
    const student = Vue.extend({
            name: 'student',
            template: `
            <div>
                <h2>学生姓名:{{name}}</h2>  
                <h2>学生年龄:{{age}}</h2>   
            </div>
        `,
            data() {
                return {
                    name: '皓月',
                    age: '20'
                }
            }
        })
        //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
                <div>
                    <h2>学校名称:{{name}}</h2>  
                    <h2>学校地址:{{address}}</h2>   
                    <student></student>
                </div>
            `,
        data() {
            return {
                name: '哔哩大学',
                address: '北京'
            }
        },
        //注册组件(局部)
        components: {
            //student组件只能供school使用
            student
        }
    })
​
    //定义hello组件
    const hello = Vue.extend({
            template: `<h1>{{msg}}</h1>`,
            data() {
                return {
                    msg: '欢迎光临!'
                }
            }
        })
        //定义app组件
    const app = Vue.extend({
        template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components: {
            school,
            hello
        }
    })
    //创建vm
    new Vue({
        //也可以在模板中调用
        //template: '<app></app>',
        el: '#root',
        //注册组件(局部)
        components: {
            app
        }
    })
</script>

vue开发者工具中的效果:

15.png

2.VueComponent构造函数

示例:创建一个school组件

 const school = Vue.extend({
        name: 'school',
        template: `
                <div>
                    <h2>学校名称:{{name}}</h2>  
                    <h2>学校地址:{{address}}</h2>   
                </div>
            `,
        data() {
            return {
                name: '皓月',
                address: '北京'
            }
        },
    })
    //创建vm
    const vm = new Vue({
        el: '#root',
        components: {
            school,
        }
    })

1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

console.log('@',school)

16.png

2.我们只需要写<school/><school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent

18.png

Vue源码:17.png

这里使用 function 声明了一个函数(VueComponent),每次调用产生的都是一个新的函数定义

4.关于this指向:

(1).组件配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

示例:

const school = Vue.extend({
        name: 'school',
        template: `
                <div>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
        methods: {
            showName() {
                console.log('showName', this)
            }
        },
    })

19.png

(2).new Vue(options)配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。 Vue的实例对象,以后简称vm。

vc和vm是一对双胞胎:vc有的功能vm都有,但vm有的功能vc不一定有——vm能通过el指定实例为哪个容器服务

3.Vue与VueComponent的内置关系

  • 显式原型:prototype
  • 隐式原型:__proto__

原型: 每一个构造函数都有一个prototype属性指向一个对象,这个对象就是构造函数实例的原型

原型链: 每一个实例都有一个__proto__属性指向的构造函数的原型对象,来获取原型对象上的属性和方法,构造函数的原型对象也有一个__proto__属性指向另外一个原型对象,以此类推,直到原型链的最终端null为止,这样一层一层往上找就形成了原型链。

原型链精髓:实例的隐式原型属性,永远指向其缔造者的原型对象

特点: 实现继承 一个对象可以拿到另一个对象上的属性和方法

构造函数都有一个prototype属性,即显式原型(属性)指向原型对象

实例对象上有__proto__属性,即隐式原型(属性)指向原型

原型对象都有一个consttuctor属性指向构造函数

构造函数new实例化实例对象

21.png

Vue与Component的关系

Vue做了这样一件事情: 让本该指向Object的原型对象的VueComponent原型对象的隐式原型属性指向Vue的原型对象——VueComponent原型对象的原型对象就是Vue的原型对象

20.png


4.单文件组件

1.什么是单文件组件: 文件名以.Vue结尾,包含HTML、js、css。

2基本结构:

<template>
//组件的结构
    <div>
    //写在template里的内容最外层必须要包裹一个标签
    </div>
</template>
<script>
//组件交互相关的代码
    //暴露出去才能使用
    export default{
    }
</script>
<stytle>
//组件的样式
</stytle>

<p style=“line-height: 20px; color: #ccc”> 版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 皓月u 原文链接:https://juejin.im/post/7026339401592471566

回到顶部