Vue的学习笔记-组件开发(初识)

最新推荐文章于 2024-10-30 19:10:39 发布

ζั͡ ั͡離 ั͡ั͡傷 ั͡

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量275

点赞数

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

本文链接：https://blog.csdn.net/qq_44832068/article/details/107381986

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的学习笔记-组件化开发（初识）

前言

组件化开发有利于把大的项目分而治之，并且可以重复使用组件模板，还能把此组件放到另外一个项目使用。
学习视频点这里

1. 认识组件

注意事项：使用在HTML使用驼峰命名法可能会报错

1.1 创建与注册组件(3种方法)

1.1.1 普通创建与注册

<script>
    <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件内容</h2>
        <p>组件内容</p>
        </div>
        `
    });
    <!--组件注册-->
    // 'my_c': HTML的标签名    'myComponent': 组件对象
    Vue.component('my_c',myComponent);
</script>

1.1.2 语法糖写法

//一起创建与注册
Vue.component('cpn',{
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
        </div>
        `,
    });

1.1.3 组件模板抽离

//在HTML编写template标签
<template id="cpn">
    <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
    </div>
</template>
//语法糖注册
Vue.component('cpn',{
        template: '#cpn'
    });

1.2 组件使用

<div id="app">
    <my_c></my_c>
</div>

</script>
    const app = new Vue({
        el: '#app',
    })
</script>

2. 全局组件与局部组件

2.1 全局组件

<div id="app">
    <my_c></my_c>
</div>

<div id="app2">
    <my_c></my_c>
</div>

<script src="../js/vue.js"></script>
<script>
     <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
        </div>
        `
    });

    // 'myC': HTML的标签名    'myComponent': 组件对象
    <!--以 Vue.component()注册的组件为全局组件-->
    Vue.component('my_c',myComponent);

    const app = new Vue({
        el: '#app'
    });
    
    const app2 = new Vue({
        el: '#app2'
    })
</script>

运行结果
在这里插入图片描述

2.1 局部组件

<body>


<div id="app">
    <my_c></my_c>
</div>

<div id="app2">
    <my_c></my_c>
</div>


<script src="../js/vue.js"></script>
<script>
    <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
        </div>
        `
    });

    // 'myC': HTML的标签名    'myComponent': 组件对象
    <!--以 Vue.component()注册的组件为全局组件-->
    // Vue.component('my_c',myComponent);

    const app = new Vue({
        el: '#app',
        components: {  //在components里面注册为局部组件
            my_c: myComponent
        }
    });

    const app2 = new Vue({
        el: '#app2'
    })
</script>
</body>

运行结果
在这里插入图片描述
你会发现在id为app2的div标签找不到<my_c></my_c>这对标签

3. 父组件与子组件

<div id="app">
    <cpn2></cpn2>
</div>

<script>
//第一个组件(子)
    const cpnC1 = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
        </div>
        `,
    });

    //第二个组件(父)
    const cpnC2 = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀，嘻嘻嘻嘻嘻嘻</p>
        <cpn1></cpn1>
        </div>

        `,
        components: {//谁在里面注册谁是子组件
            cpn1: cpnC1
        }
    });

    const app1 = new Vue({
        el: '#app',
        components: {
            cpn2: cpnC2
        },

    })
</script>