Vue组件

最新推荐文章于 2023-05-23 11:10:37 发布

墨明棋妙Mi

最新推荐文章于 2023-05-23 11:10:37 发布

阅读量81

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/z1216108894/article/details/121796250

版权

本文介绍了Vue.js中的组件化编程，包括组件的定义、复用优势，以及如何通过Vue.extend创建、局部和全局注册组件，并提供了组件嵌套和标签写作的示例。重点讲解了数据管理、组件命名规则和生命周期理解。

摘要由CSDN通过智能技术生成

1、什么是组件？

组件的定义 : 实现应用中局部功能代码(css、html、js)和资源(mp3、mp4、ttf、zip等)的集合

2、组件化编程优势？

作用 : 复用编码,简化项目编码,提高运行效率

3、Vue中使用组件的三大步骤:

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

二、注册组体

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

4、如何定义一个组件?

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下:

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

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

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

5、如何注册组件?

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

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

6、编写组件标签:

非单文件组件：局部、全局示例

//创建school组件
const school = Vue.extend({
    template:`
        <div>
            <h2>学校名称: {{schoolName}}</h2>
            <h2>学校地址: {{address}}</h2>
        </div>
    `,
    data(){
        return {
            schoolName:"尚硅谷",
            address:'北京昌平'
        }
    }
})
//创建student组件
const student = vue.extend({
    template:`
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄: {{age}}</h2>
        </div>
    `,
    data(){
        return {
            studentName:"张三',
            age:18
        }
    }
})

//第一步:创建vm
new Vue({
    el: "#root",
    //第二步:
    //方法一：注册组件(局部注册)
    components:{
        xuexiao: school,
        xuesheng:student
    }
})

//第二步:
//方法二：全局注册组件
//Vue.component("xuexiao",xuexiao)


步骤三：使用
<!--准备好一个容器-->
<div id="root">
    <!--第三步:编写组件标签-->
    <xuexiao></xuexiao>
    <hr>
    <!--第三步:编写组件标签-->
    <xuesheng></xuesheng>
</div>

几个注意点:

1.关于组件名:

一个单词组成:

第一种写法(首字母小写):school第二种写法(首字母大写):Schotl

多个单词组成:

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

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

备注:

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

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

2.关于组件标签;

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

第二种写法: <school/>

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

3.一个简写方式:

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

组件嵌套示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../package/vue.js"></script>
</head>
<body>
    <div id="root">
        <hello></hello>
        <hr>
        <school></school>
        <hr>
    </div>
    
    <script>

    //创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名:{{studentName}}</h2>
                <h2>学生年龄: {{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName:"张三",
                age:18
            }
        }
    })


    //创建school组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称: {{schoolName}}</h2>
                <h2>学校地址: {{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName:"尚硅谷",
                address:'北京昌平'
            }
        },
        components:{
            student,
        }
    })

    //创建hello组件
    const hello = {
        template:`
            <div>
                <h2>{{a}}</h2>
            </div>
        `,
        data(){
            return {
               a: "hello"
            }
        },
    }

    new Vue({
        el: "#root",
        components:{
            school,
            hello
        }
    })
    </script>
</body>
</html>

浏览器显示：