【Vue】组件化编程

阿昊在

已于 2022-03-24 18:57:30 修改

阅读量1.2k

点赞数 1

分类专栏： Vue 文章标签： vue vue.js javascript 前端

于 2022-03-21 17:29:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_48982503/article/details/123639973

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue与VueComponent的内置关系

单文件组件：

基本结构：

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

使用组件的三大步骤：

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

使用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>
    `,

    data(){ 
        return {
            studentName:'张三',
            age:'20'
        }
    },
    methods: {
        showName(){
            alert(this.studentName)
        }
    },
})

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

二、注册组件

1.局部注册：

靠new Vue的时候传入components选项

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

2.全局注册：

靠Vue.component('组件名',组件)

Vue.component('student',student)

三、使用组件(写组件标签)

<div id = 'root'>
<!-- 第三步：编写组件标签 -->
<student></student>
</div>

关于组件名:

一个单词组成：

第一种写法(首字母小写)：school
第二种写法(首字母大写)：School(与vue开发者工具相呼应)
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

非单文件组件：一个文件包含n个组件

模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

组件的嵌套

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>

VueComponent构造函数

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

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

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

关于this指向：

组件配置中：

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

new Vue(options)配置中：

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

VueComponent的实例对象，（也可称之为：组件实例对象）。 Vue的实例对象，简称vm。

Vue与VueComponent的内置关系

显式原型：prototype
隐式原型：__proto__

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

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

Vue与Component的关系：

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

单文件组件：

文件名以.Vue结尾，包含HTML、js、css（vscode记得下vetur插件）

基本结构：

<template>
    <div>
    //在template里的内容最外层必须要包裹一个标签
    </div>
</template>

<script>
//组件交互相关的代码
    //暴露出去才能使用
    export default{
    }
</script>

<stytle>
//css部分
</stytle>