九、VUE组件

DAIHAO丶

已于 2024-05-28 10:53:02 修改

阅读量284

点赞数 4

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

于 2024-05-09 14:21:31 首次发布

本文链接：https://blog.csdn.net/D_A_I_H_A_O/article/details/138318383

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、初识VUE3
二、再识VUE3-MVVM
三、VUE3数据代理
 四、VUE3事件处理
 五、VUE3计算属性
 六、Vue3监视属性
 七、VUE3过滤器
 七、VUE3内置指令
 九、VUE3组件
 十、VUE3生命周期

三大步骤

定义组件(创建组件)
注册组件
使用组件(写组件标签)

一、定义组件

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

区别如下：

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

二、注册组件

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)

三、使用组件

<module1></module1>

关于组件名

一个单词组成：
第一种写法(首字母小写)：module1
第二种写法(首字母大写)：Module1
多个单词组成：
第一种写法(kebab-case命名)：my-module1
第二种写法(CamelCase命名)：MyModule1 (需要Vue脚手架支持)

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签

第一种写法：
第二种写法：

不用使用脚手架时，会导致后续组件不能渲染。

简写

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE组件</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="root">
    <h1>
        {{ msg }}
    </h1>

    <!--3、使用组件-->
    <module1></module1>

</div>

<script type="text/javascript">
    Vue.config.productionTip = false;

    //1、创建组件
    //简写 Vue.extend({
    const module1 = {
        template:
                `
                  <div>
                    <h1>{{ module1Name }}</h1>
                    <button @click="showName">module1Name</button>
                  </div>
                `,
        data() {
            return {
                module1Name: '组件1'
            }
        },
        methods: {
            showName() {
                alert(this.module1Name)
            }
        }
    }


    //2、注册组件-全局注册 就代表所有的vm都可以用
    //Vue.component('module1',module1)


    new Vue({
        el:'#root',
        data:{
            msg:'111'
        },
        //2、注册组件-局部注册
        components:{
            module1
        }
    })

</script>


</body>
</html>

组件的嵌套

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VUE组件</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="root">
    <h1>
        {{ msg }}
    </h1>

    <!--3、使用组件-->
    <module2></module2>

</div>

<script type="text/javascript">
    Vue.config.productionTip = false;

    //1、创建组件
    //简写 Vue.extend({
    const module1 = {
        template:
                `
                  <div>
                    <h1>{{ module1Name }}</h1>
                  </div>
                `,
        data() {
            return {
                module1Name: '组件1'
            }
        }
    }

    const module2 = {
        template:
            `
                  <div>
                    <!--子组件注册给哪个父组件，就嵌套在哪个副组件里面--->
                    <module1></module1>
                    <h1>{{ module2Name }}</h1>
                  </div>
                `,
        data() {
            return {
                module2Name: '组件2'
            }
        },
        //组件嵌套
        components: {
            module1
        }
    }

    //2、注册组件-全局注册 就代表所有的vm都可以用
    //Vue.component('module1',module1)

    new Vue({
        el:'#root',
        data:{
            msg:'111'
        },
        //2、注册组件-局部注册
        components:{
          module2
        }
    })

</script>


</body>
</html>