vue 第十天（组件的基本使用）

拼搏现实的明天。 2022-10-23 09:57 142阅读 0赞

# vue 第十天 （组件的基本使用） #

## 1、组件的创建，注册 与 调用 ##

### 1.1、创建方式 全局创建 ###

**全局组件，意味着可以在多个vue实例中使用**

<div id="vue_one">
        <my-cpn1></my-cpn1>
        <my-cpn1></my-cpn1>
    </div>
    <script type="text/javascript">
        // 1.创建组件构造器对象
        const cpnC = Vue.extend({ 
            template: `<div> <h2>我是标题</h2> <p>我是段落</p> <p>我也是，我还是内容</p> </div>`
        })
        // 2.注册组件(全局组件，意味着可以在多哥vue实例中使用)
        Vue.component("my-cpn1", cpnC)
        // 3.构建 vue 实例
        const vm = new Vue({ 
            el: '#vue_one'
        })
    </script>

### 1.2、创建方式 局部创建 ###

<div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    <script type="text/javascript">
        // 1.创建组件构造器对象
        const cpnC = Vue.extend({ 
            template: `<div> <h2>我是标题</h2> <p>我是段落</p> <p>我也是，我还是内容</p> </div>`
        })
        // 2.注册组件 构建 vue
        const vm = new Vue({ 
            el: '#vue_one',
            components:{ 
                "my-c":cpnC
            }
        })
    </script>

## 2、组件的语法糖（简写） ##

### 2.1、创建方式 全局创建组件-----语法糖 ###

**全局创建组件 ---------------》语法糖（简写） Vue.component(‘注册的标签’,\{\})**

<div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    <script type="text/javascript">
        // 1.创建组件构造器对象 注册组件 Vue.component,注册的标签
        const cpnC = Vue.component('my-c',{ 
            template: `<div> <h2>我是标题</h2> <p>我是段落</p> <p>我也是，我还是内容</p> </div>`
        })
        // 构建 vue
        const vm = new Vue({ 
            el: '#vue_one'
        })
    </script>

### 2.2、创建方式 局部创建--------语法糖 ###

**局部创建组件 ---------------》语法糖（简写） components:\{“标签”:\{template:\`\`\}\}**

<div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    <script type="text/javascript">
        // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:``}}
        const vm = new Vue({ 
            el: '#vue_one',
            components: { 
                "my-c": { 
                    template: ` <div> <h2>我是标题</h2> <p>我是段落</p> <p>我也是，我还是内容</p> </div>`
                }
            }
        })
    </script>

## 2.3 分离写法 ##

### 2.3.1 局部创建组件 ###

**也可以把 template 放到body中**

<template id="diaoyong">
        <div>
            <h2>我是标题</h2>
            <p>我是段落</p>
            <p>我也是，我还是内容</p>
        </div>
    </template>
    
    <div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    <script type="text/javascript">
        // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:``}}
        const vm = new Vue({ 
            el: '#vue_one',
            components: { 
                "my-c": { 
                    template: "#diaoyong"
                }
            }
        })
    </script>

**也可以把 template 放到style中**

<div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    
    
    <script type="text/x-template" id="diaoyong">
        <div>
            <h2>我是标题</h2>
            <p>我是段落</p>
            <p>我也是，我还是内容</p>
        </div>
    </script>
    
    <script type="text/javascript">
        // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:""}}
        const vm = new Vue({ 
            el: '#vue_one',
            components: { 
                "my-c": { 
                    template: "#diaoyong"
                }
            }
        })
    </script>

### 2.3.2 全局创建组件 ###

**也可以把 template 放到body中**

<template id="woshiid1">
        <div>
            <h2>我是标题</h2>
            <p>我是段落</p>
            <p>我也是，我还是内容</p>
        </div>
    </template>
    
    
    <div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    <script type="text/javascript">
        // 1.创建组件构造器对象 注册组件 Vue.component
        const cpnC = Vue.component('my-c',{ 
            template: "#woshiid1"
        })
        // 构建 vue
        const vm = new Vue({ 
            el: '#vue_one'
        })
    </script>

**也可以把 template 放到 script 中**

<div id="vue_one">
        <my-c></my-c>
        <my-c></my-c>
    </div>
    
    
    
    <script type="text/x-template" id="woshiid1">
        <div>
            <h2>我是标题</h2>
            <p>我是段落</p>
            <p>我也是，我还是内容</p>
        </div>
    </script>
    
    <script type="text/javascript">
        // 1.创建组件构造器对象 注册组件 Vue.component
        const cpnC = Vue.component('my-c',{ 
            template: "#woshiid1"
        })
        // 构建 vue
        const vm = new Vue({ 
            el: '#vue_one'
        })
    </script>

`花开一千年,花落一千年,花叶永不见`