Vue组件化（Vue全局组件和局部组件定义、创建组件和注册组件，组件中使用methods和data，component、keep-alive标签、父子组件的数据与方法传递和多级传递（bus通信））

目录

Vue组件化

Vue全局组件

创建全局组件

注册全局组件

Vue局部组件

解决template下编写HTML代码没有提示问题

组件中使用methods

组件中使用data

component标签

切换组件动画

keep-alive标签

slot标签

匿名插槽

具名插槽

v-slot:(#)

作用域插槽

v-slot:(#)补充

父子组件

父子组件数据传递和多级传递

父子组件方法传递和多级传递

父子组件数据传递和多级传递补充

兄弟组件数据传递补充：bus通信

组件渲染方式

方式一

方式二

---

 

Vue组件化

需要先创建组件构造器，然后注册已经创建好的组件，最后才能使用。使用时直接使用注册的组件名称，例如下面中可以直接使用，网页渲染时便会使用template中的HTML代码替换name标签。

 

Vue全局组件

创建全局组件

通过var Compo=Vue.extend({template:'

'})创建全局组件，template：后直接跟组件的HTML代码即可。注意template中只能有一个根元素，多个元素只会显示一条。

注册全局组件

通过Vue.component('name',Compo)注册已经创建好的组件，第一个参数为指定已经创建好的名称，第二个参数为已经创建好的组件构造器。注意第二个参数还可以为一个对象obj，系统会调用Vue.extend(obj)，将返回结果再传入其中（Vue.component('name',{template:

})可以将创建和注册全局组件变成一步）。注意如果在注册的命名时使用了驼峰命名，那么使用组件时需要将大写变为小写字母并且在之前加上-，例如Vue.component('myName',Compo)，使用时为，还需注意注册名不能与HTML已有标签重名。

Vue局部组件

不需要注册，直接在实例中的component属性中定义即可，例如new Vue（{el:'#app',data:{},components:{'name':{template:'

'}}})，局部组件和全局组件重名时只有局部组件生效。

 

解决template下编写HTML代码没有提示问题

1. 在新建的script标签中添加type和id属性，例如：，并在此标签中编写HTML代码，这样会有提示，最后在注册时的template中写上template:'#info'即可。
2. 使用Vue提供的template标签并给其添加id，其它同上。

 

组件中使用methods

组件中只能使用组件中定义的methods而不是Vue实例中的methods，即需要给Vue.extend中传入的对象添加methods属性，在methods指向的对象中定义方法，这些方法才能在组件中使用，例如{template:'

',methods:{fun(){}}}，这样便可已在在该组件中使用fun函数（可以在template中使用），局部组件也是同理，在methods中使用this加属性名的方法拿到的数据是组件中定义的data函数返回对象的数据。

 

组件中使用data

组件中同样也只能使用组件中定义的data而不是Vue实例中的data，和methods不同的是，组件中定义的data需要是一个函数，该函数返回的对象可以理解为data，例如{template:'

',data(){return {abc:123}}}，在template中便可以用插值语法{ {abc}}来显示123。这样的好处是复用多个组件时，每个组件都会运行一遍data函数，并将其与当前组件绑定起来，使每个组件的数据相互独立，避免了多个组件公有一份数据。

 

component标签

用于切换组件，该标签上有is属性，我们通过v-bind：给is属性绑定不同的属性名，便会将该标签替换为属性名对应相同的组件名的标签（也可以使用v-if和v-else实现替换组件功能）。

切换组件动画

在Vue中通过transition标签包裹component标签进行切换组件的动画，这时现有组件消失和新组件的进入动画是同时进行的，要想改变进行的次序，则在transition标签上添加mode属性，分别可以取'in-out'和'out-in'两值，'in-out'代表新元素先进行过度，完成之后当前元素离开，另一个相反。

 

keep-alive标签

用于在切换组件的之前缓存数据，当切换回来时候，还会有相同的数据。使用方法：将该标签包裹component标签即可。示例：比如component切换的组件中有复选框，切换前选中了，如果切换后再次切换回来，加了该标签后仍然会显示勾选状态。

 

slot标签

匿名插槽

用于在组件标签中动态添加内容（默认是不能添加的）。通过将slot标签写入组件的template中，此时我们使用该组件，如果在组件标签中添加了内容，那么该内容将会替换template中的slot标签全部内容，如果没有添加内容，那么会显示slot中的内容。注意当template中的slot标签有多个时，会将在组件标签中的全部内容内容复制多份分别替换。

具名插槽

用于当有多个slot标签时，在组件标签中动态添加内容时能替换指定的slot标签。当slot标签上添加了name属性时便为具名插槽（例如name='one'），这时组件标签中动态添加的内容便不会替换该slot标签，要想替换该内容需要在组件标签添加的元素中加入slot属性等于相应的名称（例如slot='one'便会替换name='one'的slot标签），那么该内容才会去替换（不会叠加，指定多条slot='name'，这些内容将全部替换）。

v-slot:(#)

用于解决具名插槽中多个元素需要给每个元素添加slot（slot='one'）属性。该指令需要搭配template标签，在template标签上添加属性v-slot:one，这样便会将template中的内容替换slot标签中name='one'的标签。v-slot:可以简写为#。

作用域插槽

用于解决父组件标签中填充内容无法使用子组件的数据问题。通过在子组件slot标签上添加属性例如v-bind:son='sondata'，其中sondata为子组件中的数据，son为传递的数据名，在父组件的标签中的template标签上添加属性slot-scope='abc'，便可以在template标签下使用{ {abc.son}}，代替sondata数据。

v-slot:(#)补充

v-slot:也可以解决父组件标签中填充内容无法使用子组件的数据问题。例如通过v-slot:default='abc'，表示接收匿名插槽传递的数据，如果插槽有name='one'属性，则将default替换为one即可，同上便可以在template标签下使用{ {abc.son}}。

 

父子组件

理解：Vue实例其实可以看做为一个父组件，实例中定义的局部组件，可以看做它中的子组件。同理，例如全局自定义组件，我们可以在传入的对象中添加components属性来定义子组件即var ff=Vue.extend({template:'

father

'，components:{'son':{template:'

son

'}}})，注意son组件只能在其父组件中使用，即上例中注册组件Vue.component('father',ff)后，那么son组件便只能在father组件中使用。局部自定义组件的父子组件定义规则也相同。

父子组件数据传递和多级传递

默认情况下是不能互相直接使用数据，但是我们可以通过下面方法由父组件向子组件传递数据：

1. 在子组件标签上使用v-bind:绑定传递数据（可以不使用，不使用拿到的就是字符串'name1'），例如:fathername1='name1'和:fathername2='name2'，其中name1为father中的数据，fathername1为传递数据的名称。
2. 在子组件中添加属性props（数组）接收该数据，var ff=Vue.extend({template:'
   father
   '，components:{'son':{template:'
   son
   ',props:['fathername1','fathername2']}}})。注意如果想要接收的数据使用驼峰命名，在第一步中需要将传递的数据名称去掉大写字母并在之前加-连接，例如1中使用father-name1为传递数据的名称，则2中接收的数据名将会变为fatherName。可以多级传递（爷向父向子等逐一传递），方法一样，props数组中的数据时不允许修改的（修改后可以正常运行，但会报错）。
3. props属性可以是对象写法例如props:{fathername1:String,fathername2:Boolean}，此时会指定fathername1的数据类型为字符串类型，而2为布尔类型，如果传递的值不是该类型会报错。此时注意fatername1还可以为一个对象，例如fatername1:{type:String,default:'pyf'}，代表可以指定数据类型和默认值为'pyf'（不传数据时为默认值）

父子组件方法传递和多级传递

同样不能互相直接使用方法，通过下面方法实现父组件向子组件传递方法：

1. 子组件标签中使用v-on:绑定传递方法，例如：@fatherfun=‘fun’，其中fun为father中的函数，fatherfun为传递函数的名称。
2. 和传递数据不同子组件不用接收，子组件在自己方法中直接通过this.$emit('fatherfun')运行传递的方法。注意$emit()中还可以接收其它参数，它会将后面的参数传递个运行的方法，例如this.$emit('fatherfun','a1','a2',...,'an')，相当于运行了fatherfun（'a1','a2',...,'an'）而且是在父组件的环境中运行的即fatherfun函数体中的this.拿到的数据是父组件的数据，而不是当前组件的（其它的this依然是当前组件的数据，例如参数使用this.a1,this.a2...是拿到当前组件的数据）。注意方法的传递不能使用驼峰命名，只能使用短横线命名即1中使用father-fun，2中也使用同样的。可以多级传递（爷向父向子等逐一传递），将父组件中传递的方法this.$emit('fatherfun')放入该组件的methods中定义的方法中（例如methods中定义myfun），然后再通过将以上方法（@grandsun='myfun'）传递给孙组件即可。

注意在组件标签上使用v-model例如v-model=username相当于:value=username和@input=函数，即我们在prop数组中可以直接用value接收，也可以通过this.$emit('input','pyf'),将数据'pyf'传给父组件中的username。

父子组件数据传递和多级传递补充

由于上例方法传递中fatherfun函数体中的this.拿到的数据是父组件的数据，那么我们也可以变相的实现子组件向父组件传递数据：

1. 父组件向子组件传递方法。
2. 子组件通过this.$emit()运行方法例如this.$emit('fatherfun',a1,a2,...,an)，并将子组件的数据放在a1,a2,...,an参数中。
3. 在fatherfun的函数体中定义this.mya1=a1...这样就将父组件中的mya1改变为子组件中的数据a1。

父子组件传递传递数据补充：可以通过Vue实例属性中的$ref拿到组件标签中的任何方法和数据直接修改（不方便查找数据出错，故不推荐）

兄弟组件数据传递补充：bus通信

定义2个全局组件bro1，bro2，在Vue实例对象vm1中实现bro1向bro2传递数据：这时需要借助新建的空Vue实例vm2，在bro2组件的组件已挂载生命周期方法mounted()中定义vm2上自定义事件vmBus即vm2.$on('vmBus',function(){})，然后在bro1的方法中通过vm2.$emit.('vmBus',data1,..,datan)触发事件并传递bro1中的数据。

组件渲染方式

方式一

在Vue控制区域使用组件标签渲染。

方式二

在实例Vue对象中通过render属性对应的方法渲染（Vue生命周期中会自动调用该方法），渲染方式会替换整个Vue的控制区域，例如new Vue（{el:'#app',data:{},render:function(fun){let html=fun('one');return html;}})，系统会给render指向的函数传一个函数名，该函数接收一个组件名的参数（已注册的组件名），可以生成对应组件的模板，最后将return的内容渲染到页面上去。