vue基础学习（三）_你看我独自一人_新浪博客

ゝ一纸荒年。 2021-12-11 09:19 203阅读 0赞

宝宝博客都是自己写了记录一下问题哟，也便于帮助其他同事，请不要随意复制 ![vue基础学习（三）][vue]因为小编的博客是会放在简历上去的~~~

### [![vue基础学习（三）][vue 1]][vue_vue 1]       ###

# 1、组件 #

### 01-什么是组件 ###

[![vue基础学习（三）][vue 2]][vue_vue 2]

### 02-组件的创建 ###

**1、****组件创建的三种方式**

**(1)    ** **Vue.extend() + Vue.component() **  **定义**** **

// 1. 使用vue.extend()定义组件模板

var dv = Vue.extend({

template:'

`我是一个组件`

})

// 2. 使用Vue.component()注册组件Vue.component(组件名，组件模板)

Vue.component('com',dv)

// 3. 在Vue托管区域像使用普通HTML标签一样使用组件

**注意：**

**1、****模板****template****只能有一个根节点**

**2、****组件名是驼峰，那么使用需要以****-****连接**** **  **如****indexA**  **使用就是** **index-A**

**(2)    ** **Vue.component()**  **定义**

// 1. 使用Vue.component定义组件

Vue.component('com',{

template:'

`我是一个组件中的元素`

我也是组件中的元素

})

// 2. 使用组件

**(3)    ** **使用****template****标签定义模板**

// 1. 使用Vue.component定义组件，并且使用选择器选择模板

Vue.component('com',{

template:'#temp'

})

// 2. 使用template标签定义模板,并且给template标签添加id

注意：template模板需要在vue范围外写

我是p元素

我是span元素

或者：

<</span>scripttype="x-template"id="heima">

indexD

</</span>script>

// 3. 使用组件

### 03-组件中使用事件和指令 ###

[ https://cn.vuejs.org/v2/guide/components.html\#data-必须是一个函数][https_cn.vuejs.org_v2_guide_components.html_data-]

**注意：****data****是一个函数，而且函数中以返回值的形式返回数据对象，其他的在跟****vue****实例是一样的**

[![vue基础学习（三）][vue 3]][vue_vue 3]

### 04-父子组件的创建 ###

**注意：子组件需要写在父组件里面**

**方法****1****：**

[![vue基础学习（三）][vue 4]][vue_vue 4]

**方法****2****：**

[![vue基础学习（三）][vue 5]][vue_vue 5]

### 05-父组件传值给子组件 ###

**1、****步骤分析：**

**(1)    ** **父组件：父组件中的值传给子组件**  **，**  **使用绑定的方式传递**

**(2)    ** **子组件接收父组件传过来的值即可在子组件中使用**  **，**

在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量和第一步绑定的这个属性同名

[![vue基础学习（三）][vue 6]][vue_vue 6]

### 06-子组件传值给父组件 ###

[![vue基础学习（三）][vue 7]][vue_vue 7]

**提示：****template****可以接模板字符串**

// 1. 在父组件中定义好要传递的数据

Vue.component(“father”,{

template:`

父亲年纪大了，记性不好，我儿子告诉我他叫{ {mySonName}}

data:{

mySonName:'???'

components:{

son:{

template:'<</span>button>点击我就告诉我爸爸我叫{ { myName}}</</span>button>',

data(){

myName:”小明”

}

})

// 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据

// 第一个参数就是自定义的事件名

// 第二个参数就是需要传递给父组件的数据

this.$emit('func',this.myName)

// 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的事件名同名

父亲年纪大了，记性不好，我儿子告诉我他叫{ {mySonName}}

func = 'getmsg'>

// 4. 在父组件的methods中定义一个事件处理函数

methods:{

getmsg:function(data){

// data就是子组件传过来的数据

}

### 07-兄弟组件间传值 ###

步骤分析：

1、创建好兄弟组件

2、传递方式：创建一个空的实例事件总线 var eventBus=new Vue();

3、daughter传递方式 实例事件总线.$emit(“事件名称”,需传递的值)

4、brother获取方式 实例事件总线.$on(“事件名称”,函数)函数中参数即传递过来的值

[![vue基础学习（三）][vue 8]][vue_vue 8]

### 08-创建动态组件  (is动态组件) ###

**1****、****is****属性和****component****实现组件切换**

// comname 是哪个组件名,则component就会被渲染成哪个组件

// component 就是一个占位标签

new Vue({

el:'#app',

comname:'login' //此时显示login组件

})

[![vue基础学习（三）][vue 9]][vue_vue 9]

**2、****:is=”correntCom”****和****is=”correntCom”****的区别**

`(1)``:is=”correntCom”``是绑定事件   原型是v-on:is=”correntCom”`

`(2)``is=”correntCom”` `是默认值`

### 09-局部过滤器和局部自定义指令 ###

**局部自定义指令和过滤器只能在局部使用，不能在外部全局使用**

//  自定义指令通过Vue.directive()创建，它包含两个参数，**一个是自定义指令的名字，**

**可以随便取，但是全部小写****；****另一个是一个对象，表示自定义指令的配置项****。**

// inserted钩子函数，它表示自定义指令插入到标签中的时候就执行

// inserted钩子函数有两个参数（el,binding） el表示使用自定义指令的元素，binding表示自定义指令的信息

1、局部过滤器

filters:{

'过滤器的名称':function(value){ 注意：过滤器的名称是一个函数

return 处理完毕的数据

}

2、局部自定义指令

directives:{

'自定义指令的名称':{ 自定义指令的名称必须小写

inserted:function(){},

}

3、全局指令

Vue.directive('指令名称',{ 注意：指令名称必须全部小写

// 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)

inserted:function(){},

})

### 10-实例生命周期 ###

**回调函数****:****一个函数被当做参数进行传递的时候****,****称作这个函数为回调函数**

**构造函数****:****一个函数被****new** **关键字引导执行的时候****,****称作这个函数为构造函数**

**钩子函数****:** **一个应用程序或者框架内部提前定义好的一批函数****,****这些函数会在特定的时间段自动执行**

**生命周期****:** **一个程序会存在初始化** **-** **运行** **-** **销毁等阶段****,****这些阶段统称为该程序的生命周期**

new Vue({

el:'#app',

data:{},

methods:{},

beforeCreated(){},

// data中的数据和methods中的方法已经初始化完毕会去自动执行created方法

created(){

// 用于发生数据请求,也可以初始化一些数据

beforeMount(){},

// 真实DOM已经渲染完毕会执行mounted函数

mounted(){

// 操作真实DOM

}

beforeUpdate(){},

// data中的发生了变化而且被重新渲染到了界面上时才会执行

updated(){

// 数据更新后重新操作DOM

// 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。

beforeDestroy(){},

// 实例已经从内存中被销毁

destroyed(){}

})

[vue]: /images/20211211/2873ee38d794483b8774919ed5a6b6de.png
[vue 1]: https://img-blog.csdnimg.cn/img_convert/f0280ba97ca61a6563f707f8a0709b09.png
[vue_vue 1]: /images/20211211/68e96baaec8742bb912ca9273975a7dc.png
[vue 2]: https://img-blog.csdnimg.cn/img_convert/77952abfb1805776986e08346b1feafa.png
[vue_vue 2]: /images/20211211/014114766a1340d09a194e159ab82c39.png
[https_cn.vuejs.org_v2_guide_components.html_data-]: https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
[vue 3]: https://img-blog.csdnimg.cn/img_convert/25675fe6d2ddce0e3ee3d4f461b68c84.png
[vue_vue 3]: /images/20211211/138d9a982e044e3190e1f8760d98e57f.png
[vue 4]: https://img-blog.csdnimg.cn/img_convert/966b90ac18bb75ac70b574df413eda3d.png
[vue_vue 4]: /images/20211211/da15bf7089a64e45a4be066f37f83746.png
[vue 5]: https://img-blog.csdnimg.cn/img_convert/cad8217d2cf30be7378873509bc6b786.png
[vue_vue 5]: /images/20211211/f3e54bb3c15e4f64817a3657adffa83d.png
[vue 6]: https://img-blog.csdnimg.cn/img_convert/a38d12545c22c55eff850d246246f057.png
[vue_vue 6]: /images/20211211/73c52c27e3a64f4386b626db8e149569.png
[vue 7]: https://img-blog.csdnimg.cn/img_convert/d20e63327ea294308156b3cc04ead19d.png
[vue_vue 7]: /images/20211211/e38987410a1047d6813221dda66fde22.png
[vue 8]: https://img-blog.csdnimg.cn/img_convert/926f3faf6c82131e3644e99c826f94f7.png
[vue_vue 8]: /images/20211211/ed2dda302941420da06138ed4535ab22.png
[vue 9]: https://img-blog.csdnimg.cn/img_convert/a6710ab217e9701f55bcbff9d641d287.png
[vue_vue 9]: /images/20211211/203ac193376049a18427389feeb5a76e.png