Vue.js组件(component)的创建

快来打我* 2022-12-21 00:44 229阅读 0赞

### 组件compoent ###

*  组件是什么
 *  创建组件
 *   *  创建全局组件
     *  使用组件
     *  创建局部私有组件
 *  组件的应用
 *  父子组件之间的通信

# 组件是什么 #

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

# 创建组件 #

## 创建全局组件 ##

第一种创建方式：  
语法结构：`Vue.component('组件名称',Vue.extend({template:'html结构'}))`

Vue.extend():使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。  
y  
用法：

注意：`mycom1`是我们**自定义**的创建全局组件的名称，`template`中的模板字符串，是想要渲染在页面上的内容

第二种创建方式  
语法结构：`Vue.component('组件名称',{ template:'html结构' })`  
用法：

这种方式是直接将我们需要渲染的html结构作为Vue.component()的第二个参数传递进去。此时，Vue默认自动调用**Vue.extend()**

第三种创建方式  
语法结构：

<template id='tmp1'>
    
    </template>
    <script> Vue.component('组件名称',{ template:'#tmp1' }) </script>

用法：

<template id="tmp1">
    	<div>
        	<h1>这是第三种创建组件的方式</h1>
        </div>
    </template>
    <script> Vue.component('mycom3',{ template:"#tmp1" }) new Vue({ el:'#app', data:{ }, methods:{ } }) </script>

这种方式与上面的方式差不多，只是将渲染模板单独拉出来写了。

注意如果将template模板单独放在外部写，必须要一个容器包裹着html元素，此例用div包裹着h1

## 使用组件 ##

我们创建组件之后，要想组件发挥作用，就需要调用组件  
调用方式：类似于写`html标签`一样  
`<组件名称></组件名称>` 或者 `<组件名称/>`

以上面三种方式为例，调用组件：

<div id="app">
        <mycom1></mycom1>
        <mycom2></mycom2>
        <mycom3></mycom3>
    
    </div>
    <template id="tmp1">
    	<div>
        	<h1>这是第三种创建组件的方式</h1>
        </div>
    </template>
    <script> Vue.component('mycom1',Vue.extend({ template:'<h1>这是使用Vue.extend()创建组件</h1>' })) //或者 // var com1 = Vue.extend({ // template:"<h1这是使用Vue.extend()创建组件h1>" // }) // Vue.component('mycom1',com1) Vue.component('mycom2',{ template:"<h1>这是第二种方式创建组件</h1>" }) Vue.component('mycom3',{ template:"#tmp1" }) new Vue({ el:'#app', data:{ }, methods:{ } }) </script>

结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

--------------------

## 创建局部私有组件 ##

私有组件的创建方式与前面所学过的私有过滤器创建的方法相似，给Vue实例对象添加`components`属性

语法结构：

第一种方式：

或者将模板直接写进结构里面也可以

components:{ 
        自定义组件名称:{ 
            template:"html结构"
        }
    }

第二种方式：使用字面量的方式定义模板对象

var tmp2 = {
    	template:'html结构'
    }
    <script> new Vue({ el:'#app', data:{ }, methods:{ }, components:{ tmp2 } } }) </script>

私有组件的使用方式和全局组件的使用方式一样，直接调用就可以了

# 组件的应用 #

[实现点击按钮转换页面的功能][Link 1]

# 父子组件之间的通信 #

[组件之间的通信][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/bac525c85da84c69b8c4704250f791c3.png
[Link 1]: https://blog.csdn.net/PILIpilipala/article/details/109675051
[Link 2]: https://blog.csdn.net/PILIpilipala/article/details/109681124