vue组件

组件的定义：实现应用中局部功能代码和资源的集合

　　理解：用来实现局部功能效果的代码集合（html、css、js、image）

　　为什么：一个界面的功能很复杂

　　作用：复用编码，简化项目编码，提高运行效率

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

单文件组件：一个文件中只包含一个组件

vue使用组件的三大步骤

　　1）定义组件（创建组件）

　　2）注册组件

　　3）使用组件（写组件标签）

如何定义一个组件？

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

　　区别如下;

　　　　1) "el" 不要写，为什么？？？--------最终所有的组件都要经过vm的管理，由vm中的el决定服务哪个容器。

　　　　2）data必须写成函数，为什么? -------避免组件被复用时，数据存在引用关系

　　备注：使用template可以配置组件结构

如何注册组件

　　1）局部注册靠new vue 的时候传入components 选项

　　2）全局注册靠vue.component('组件名'，组件)

编写组件标签

例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <xuexiao></xuexiao>
            <hr>
            <xuesheng></xuesheng>
        </div>
    </body>
    <script type="text/javascript">
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                </div>   
            `,
            data(){
                return {
                    schoolName:'gubi',
                    address:'莲溪'
                }
            }
        })
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生名称：{{age}}</h2>    
                </div>   
            `,
            data(){
                return {
                    studentName:'gubi',
                    age:18
                }
            }
        })
        new Vue({
            el:'#root',
            components:{
                xuexiao:school,
                xuesheng:student
            }
        })
    </script>
</html>

View Code

几个注意点：

　　1）关于组件名

　　　　一个单词组成

　　　　　　第一种写法 school

　　　　　　第二种写法 School　

　　　　多个单词组成

　　　　　　第一种写法 my-school

　　　　　　第二种写法 MySchool (需要vue脚手架支持)

　　　　备注：

　　　　　　1）组件名尽可能回避html中已有的元素名称，例如：h2,H2都不行、

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

　　2）关于组件标签

　　　　第一种写法：<school></school>

　　　　第二种写法：<school/> 但是，不使用脚手架的时候，<school/>会导致后续组件不能渲染

　　3）一个简写方式

　　　　const school = Vue.extend(options) 可简写为： const school = options，如下

/* const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                </div>   
            `,
            data(){
                return {
                    schoolName:'gubi',
                    address:'莲溪'
                }
            }
        }) */
        const school = {
            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                </div>   
            `,
            data(){
                return {
                    schoolName:'gubi',
                    address:'莲溪'
                }
            }
        }

View Code

组件的嵌套

　　在这里给出一个例子：我们最外层是vm，然后vm之下是app，在app之下套school，套hello，在school之下套学生

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <app></app>
            <hr>
        </div>
    </body>
    <script type="text/javascript">
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{name}}</h2>
                    <h2>学生名称：{{age}}</h2>    
                </div>   
            `,
            data(){
                return {
                    name:'gubi',
                    age:18
                }
            }
        })
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                    <student></student>
                </div>   
            `,
            data(){
                return {
                    name:'gubi',
                    address:'莲溪'
                }
            },
            components:{
                student  
            }
        })   
        const hello = Vue.extend({
            template:`
                <h1>{{msg}}</h1>
            `,
            data(){
                return{
                    msg:'欢迎来到我的世界！'
                }
            }
        })
        const app = Vue.extend({
            template:`
                <div>
                    <hello></hello>
                    <school></school>
                </div>
            `,
            components:{
                school,
                hello    
            }
        })
        new Vue({
            el:'#root',
            components:{
                app
            }
        })
    </script>
</html>

View Code

关于VueComponent

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

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

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

　　4) 关于this指向问题

　　　　1）组件配置中：

　　　　　　data函数、methods中的函数、watch函数、computed函数，他们的this均是【vueComponent实例对象】

　　　　2）.new Vue(Options) 配置中

　　　　　　data函数、methods中的函数、watch函数、computed函数，他们的this均是【vue实例对象】

　　5）VueComponent的实例对象，　　以后简称vc

　　　　vue的实例对象以后简称vm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <school></school>
            <hello></hello>
            <hr>
        </div>
    </body>
    <script type="text/javascript">
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                    <button @click="showName"></button>
                </div>   
            `,
            data(){
                return {
                    name:'gubi',
                    address:'莲溪'
                }
            },
            methods:{
                showName(){
                    console.log(this)
                }
            }
        })   
        const hello = Vue.extend({
            template:`<h2>{{msg}}</h2>`,
            data(){
                return{
                    msg:'哈哈哈哈哈'
                }
            }
        })
        console.log(school===hello)   //验证两者是否为同一个vuecomponent
        console.log(hello)
        new Vue({
            el:'#root',
            components:{
                school,hello
            }
        })
        
    </script>
</html>

View Code

一个重要的内置关系 VueComponent.prototype.__proto__ === Vue.prototype

为什么要有这个关系，让组件实例对象（vc）可以访问到vue原型上的属性和方法

如下例子，我们创建了一个vue.prototype.x对象，然后通过组件进行访问

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <xuexiao></xuexiao>
            <hr>
        </div>
    </body>
    <script type="text/javascript">
        Vue.prototype.x = 1;
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>    
                    <button @click="showX">点我显示x信息</button>
                </div>   
            `,
            data(){
                return {
                    schoolName:'gubi',
                    address:'莲溪'
                }
            },
            methods:{
                showX(){
                    console.log(this.x)
                }
            }
        })
        new Vue({
            el:'#root',
            components:{
                xuexiao:school
            }
        })
    </script>
</html>

View Code

组件实例

　　首先，我们创建两个vue单文件组件（student、school）

<template>
    //组件的结构
    <div class="demo"> 
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    //组件交互相关的代码
    export default{
        name:'School',   //这个可以不定义，作用是： 呈现出来的名字为 School
        data(){
            return {
                schoolName:'尚硅谷',
                address:'广州'
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        },
    }
</script>


//组件的样式
<style>
    .demo{
        background-color: orange;
    }
</style>

View Code

<template>
    //组件的结构
    <div class="demo"> 
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    //组件交互相关的代码
    export default{
        name:'student',   //这个可以不定义，作用是： 呈现出来的名字为 School
        data(){
            return {
                name:'gubi',
                age:18
            }
        },
    }
</script>


//组件的样式
<style>
    .demo{
        background-color: orange;
    }
</style>

View Code

　　然后，再创建一个组件去管理这两个组件（App）

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>

<script>
    import School from './School.vue'
    import Student from './student.vue'
    
    export default{
        name:'App',
        components:{
            School,Student
        }
    }
</script>

<style>
</style>

View Code

　　再创建一个main.js文件去引入之前的App

import App from './App.vue'

new Vue({
    el:'#root',
    template::`<App></App>`,
    components:{App},
})

View Code

　　再创建一个index.html来进行内容的呈现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="root">
            
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>

View Code

但是，这样操作之后，控制台会报一个错误

引入脚手架之后，就不会有这样的错误，即;我们要引入脚手架了！

posted @ 2021-10-14 12:31 古比阅读(130) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

古比

vue组件

公告