Vue —— 组件化编程（非单文件组件 & 非单文件组件）

一、基本使用

Vue 中使用组件的三大步骤：

定义组件（创建组件）

注册组件

使用组件（写组件标签）

如何定义一个组件？

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

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

data 必须写成函数，为什么？ —— 避免组件被复用时，数据存在引用关系。

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

如何注册组件？

局部组件：靠 new Vue 的时候传入 components 选项

全局注册：靠 Vue.component ('组件名',组件)

编写组件标签：<school></school>

实例：局部注册案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <!-- 第三步：使用组件 -->
        <school></school>
    </div>

    <script>
        Vue.config.productionTip = false;   
    
        // 第一步：创建 school 组件
        const school = Vue.extend({
    
    
            template:`
                <div>
                    <h2>学校名称：{
     
     {schoolName}}</h2>
                    <h2>学校地址：{
     
     {address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            data(){
    
    
                return {
    
    
                    schoolName: '哔哩哔哩',
                    address: '中国'
                }
            },
            methods:{
    
    
                showName(){
    
    
                    alert(this.schoolName)
                }
            }
        })
        
        new Vue({
    
    
            el:'#app',
            // 第二步：注册组件(局部注册)
            components:{
    
    
                school
            }
        })

    </script>
</body>
</html>

在这里插入图片描述
实例：全局注册案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <!-- 第三步：使用组件 -->
        <hello></hello>
    </div>
    <hr/>
    <div id='app2'>
        <!-- 第三步：使用组件 -->
        <hello></hello>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
    
        // 第一步：创建 hello 组件
        const hello = Vue.extend({
    
    
            template:`
                <div>
                    <h2>Hello vue!</h2>    
                </div>
            `,
            data(){
    
    
                return {
    
    
                    name:'张三'
                }
            }
        })
        
        // 第二步：全局注册组件
        Vue.component('hello', hello)

        // 第一个实例
        new Vue({
    
    
            el:'#app',
        })

        // 第二个实例
        new Vue({
    
    
            el:'#app2'
        })

    </script>
</body>
</html>

在这里插入图片描述

二、几个注意点

关于组件名

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

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

第二种写法( CamelCase 命名)：Myschool (需要 Vue 脚手架支持)

备注：

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

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

关于组件标签

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

第二种写法：<school/>

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

简写方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <h2>{
    
    {
    
    msg}}</h2>
        <my-school></my-school>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
    
        const s = Vue.extend({
    
    
            name: 'QingHua',
            template:`
                <div>
                    <h2>学校名称：{
     
     {name}}</h2>    
                    <h2>学校地址：{
     
     {address}}</h2>    
                </div>
            `,
            data(){
    
    
                return{
    
    
                    name: '清华大学',
                    address: '北京'
                }
            }
        })

        new Vue({
    
    
            el:'#app',
            data:{
    
    
                msg: 'Hello vue!',
            },
            components:{
    
    
                'my-school': s
            }
        })

    </script>
</body>
</html>

在这里插入图片描述

三、组件的嵌套

把一个组件写入另一个组件，或把多个组件写入一个组件，从而达到嵌套的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <app></app>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
        
        // 定义 student 组件
        const student = Vue.extend({
    
    
            name:'student',
            template:`
                <div>
                    <h3>学生姓名：{
     
     {name}}</h3>
                    <h3>学生年龄：{
     
     {age}}</h3>
                </div>
            `,
            data(){
    
    
                return{
    
    
                    name: '张三',
                    age: 8
                }
            }
        })

        // 定义 school 组件
        const school = Vue.extend({
    
    
            name:'school',
            template:`
                <div>
                    <h3>学校名称：{
     
     {name}}</h3>
                    <h3>学校地址：{
     
     {address}}</h3>
                    <student></student>
                </div>
            `,
            data(){
    
    
                return{
    
    
                    name: '清华大学',
                    address: '北京'
                }
            },
            components:{
    
    
                student
            }
        })

        // 定义 hello 组件
        const hello = Vue.extend({
    
    
            template:`
                <h1>{
     
     {msg}}</h1>
            `,
            data(){
    
    
                return{
    
    
                    msg: '努力学习vue!'
                }
            }
        })

        // 定义 app 组件
        const app = Vue.extend({
    
    
            template:`
                <div>
                    <hello></hello>
                    <school></school>
                </div>
            `,
            components:{
    
    
                school,
                hello
            }
        })

        new Vue({
    
    
            el: '#app',
            components:{
    
    
                app
            }
        })

    </script>
</body>
</html>

在这里插入图片描述

四、VueComponent

school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
我们只需要写 <school/> 或 <school></school> ，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options) 。
特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent 。
关于this的指向：

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

new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的 this 均是【Vue实例对象】。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <school></school>
        <hello></hello>
    </div>
    
    <script>
        Vue.config.productionTip = false;   
        
        // 创建组件
        const school = Vue.extend({
    
    
            name:'school',  //指定组件在开发者工具中呈现的名字
            template:`
                <div>
                    <h2>学校名称:{
     
     {name}}</h2>    
                    <h2>学校地址:{
     
     {address}}</h2>
                    <button @click="showName">点我提示学校名</button>  
                </div>
            `,
            data(){
    
    
                return{
    
    
                    name:'清华大学',
                    address:'北京'
                }
            },
            methods:{
    
    
                showName(){
    
    
                    console.log('showName',this)
                }
            }
        })

        // 创建组件
        const hello = Vue.extend({
    
    
            template:`
                <h2>{
     
     {msg}}</h2>
            `,
            data(){
    
    
                return {
    
    
                    msg:'你好'
                }
            }
        })

        new Vue({
    
    
           el:'#app',
        // 注册组件
           components:{
    
    school,hello}
        })

    </script>
</body>
</html>

在这里插入图片描述

五、一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ = Vue.prototype 。
为什么要有这个关系：让组件实例对象可以访问到 Vue 原型上的属性、方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <!-- 引入Vue -->
    <script src="vue.js"></script>
</head>
<body>

    <div id='app'>
        <school></school>
    </div>

    <script>
        Vue.config.productionTip = false;   

        Vue.prototype.x = 99
        
        const school = Vue.extend({
    
    
            name:'school',  //指定组件在开发者工具中呈现的名字
            template:`
                <div>
                    <h2>学校名称:{
     
     {name}}</h2>    
                    <h2>学校地址:{
     
     {address}}</h2>
                    <button @click="showX">点我输出x</button>  
                </div>
            `,
            data(){
    
    
                return{
    
    
                    name:'清华大学',
                    address:'北京'
                }
            },
            methods:{
    
    
                showX(){
    
    
                    console.log(this.x)
                }
            }
        })

        new Vue({
    
    
            el:'#app',
            components:{
    
    
                school
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
不积跬步无以至千里不积小流无以成江海

Vue —— 组件化编程（非单文件组件 & 非单文件组件）

一、基本使用

二、几个注意点

三、组件的嵌套

四、VueComponent

五、一个重要的内置关系

猜你喜欢