Vue入门-组件基础

组件: 项目的开发,就是一个组件树,组件可以进行复用。

组件的名字

        1.html标签不区分大小写
        2.不能跟系统标签重名
        3.遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)
        4.支持驼峰命名.myHeader,但是在引用的时候,需要使用my-header的方式组件支持两种定义方式

全局组件

语法：Vue.component('my-component-name', {// ... 选项 ...})
方式一：在{}中写入template模板结构

方式二：将template模板结构写到组件外面，指定对应的模板名，即id属性。

局部组件

语法：在实例中添加components，注入即可。
方式一：在实例中添加components,注入子组件

方式二：将template模板结构写到组件外面，声明变量接收，当使用的时候，在components中注入即可。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app1" style="border: 1px solid #333333;margin: auto;width: 500px;">
        <my-header></my-header>
        <my-cont></my-cont>
        <my-btn></my-btn>
    </div>
    <br>
    <div id="app2" style="border: 1px solid #333333;margin: auto;width: 500px;">
        <my-header></my-header>
        <my-cont></my-cont>
        <genie></genie>
    </div>
</body>

</html>
<template id="weizhuang">
    <section>
        <p>我是my-cont组件中的内容</p>
    </section>
</template>
<template id="child">
    <div>
        <input type="text" placeholder="请输入用户名">
        <br>
        <textarea placeholder="请留言"></textarea>
    </div>
</template>
<script>
    // 1.注册全局组件：可以在任何一个实例中引入

    // 方式一
    Vue.component('my-header', {
        // 指定组件的模板, 只有一个根标签，以下div为跟标签
        template: `
            <div>
                <h1>全局组件my-header的h1标签</h1>
                <p>全局组件my-header的p标签</p>
            </div>
        `
    });

    // 方式二
    // 注意：在进行组件化开发的时候，每一个Vue文件都有一个template模板
    Vue.component('myCont', {
        // 指定组件的模板, 只有一个根标签
        template: '#weizhuang'
    });

    // 2.注册局部组件
    // 方式一：
    new Vue({
        el: '#app1',
        components: {
            myBtn: {
                template: `
                <div>
               <button>我是app1中的button1按钮</button>
               <button>我是app1中的button2按钮</button>
               </div>
               `
            }
        }
    });

    // 方式二：
    // 备注：在组件化开发的时候，使用export defult = 该对象，如果在其他组件中要使用，直接在components中注入即可。
    let child = {
        template: '#child'
    };
    new Vue({
        el: '#app2',
        components: {
            genie: child
        }
    });
</script>

猜你喜欢