当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue的学习笔记-组件开发(初识)

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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>
父组件与子组件的总结

在components: {}里面注册的是子组件，调用者为父组件，从这里也可以得出Vue既是对象也是组件。

本文地址：https://blog.csdn.net/qq_44832068/article/details/107381986

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网