Vue 中的组件
VUE中的组件
一个自定义的标签，vue就会把他看成一个组件，vue可以给这些标签赋予一定意义；一个页面就是一个组件
好处：
- 1、提高开发效率
- 2、方便重复使用
- 3、便于协同开发
- 4、更容易被管理和维护
自定义标签的书写规范：
1、组件名不支持大写字母（首字母可支持大写）
2、html中采用多个单词用-隔开命名法，js中转换为对应的驼峰命名法
注意：组件中的动态数据data数据必须是函数数据类型的，返回一个实例作为组件的数据。这样做是为了防止子组件之间公用数据导致的同时更新；（下面局部组件中有案例）
全局组件
用法：声明一次可以在任何地方使用
//必须要先用component赋予自定义标签意义，然后再初始化实例 Vue.component('my-hand',{ template:'<div>{{msg}}</div>', data(){ return {msg:'我很英俊'} } }); let vm=new Vue({ el:'#app' }) //页面中使用 <div id="app"> <my-hand></my-hand> </div>
局部组件
用法：必须告诉这个组件属于谁，组件之间是相互独立的，不能直接跨作用域，vue的实例也是一个组件，拥有生命周期函数，理论上可以无限嵌套
1、创建局部组件（js）
2、注册这个组件（js）
3、在HTML中使用这个组件
注意事项：
1、子组件不能直接使用父组件的数据
2、组件理论上可以无限嵌套
3、子组件之间如果共用了数据，而且不把data写为返回一个对象的形式，会导致同时更新；
//创建一个局部组件 let handsome={ template:'<div>{{msg}}</div>', //组件中的data必须是函数类型的，返回一个值作为组件的数据 data(){ return {msg:'我很英俊'} } }; let handsome1={ template:'<div>{{msg}}</div>', data(){ return {msg:'我是在外部创建的局部组件'} } }; let vm=new Vue({ el:'#app', components:{ //在components中注册局部组件 handsome：handsome， handsome1：handsome1 //在ES6中属性名和值相同可只写一个（上面的可简写为如下的形式） handsome，handsome1， //也可直接在components中直接创建和注册子组件 handsome2:{ template:'<div>{{msg}}</div>', data(){ return {msg:'我是在components中创建和注册的局部组件'} } } } }) //在页面中使用局部组件 <div id="app"> <handsome></handsome> <handsome1></handsome1> <handsome2></handsome2> </div>
子组件之间公用数据导致的同时更新的问题；
let obj={school:'zfpx'}; let component1 = { template: `<div @click="school='hello'">组件一{{school}}</div>`, data(){ return obj;//此种写法是错误的，点击组件一的时候会导致obj的数据更新，结果也会反映到组件二上 } }; let component2 = { template: '<div>组件二{{school}}</div>', data(){ return obj; } }; let vm=new Vue({ el:'#app', components:{ component1,component2 } }) //页面中使用 <div id="app"> <component1></component1> <component2></component2> </div>
子组件与父组件之间的数据传递和嵌套
嵌套
//创建局部组件，相当于给grandson这个标签赋予了实际的意义 //一定要先创建最内层的组件（即孙子） let grandson={ template:'<div>{{msg}}</div>', data(){return {msg:'我是孙子'}} }; let son={ template:'<div>{{msg}}<grandson></grandson></div>', data(){return{msg:'我是儿子'}}, components:{ //在儿子中嵌套孙子组件 //在son的components中注册了孙子组件后，才可在son的模版中使用grandson标签（但是依然不能在页面中使用son标签） grandson } }; let parent={ template:'<div>{{msg}}<son></son></div>', data(){return{msg:'我是父亲'}}, components:{son} }; let vm=new Vue({ el:'#app', components:{ //在vue的实例中注册了parent组件之后才能在页面中使用parent标签 parent } }) //在页面中使用局部组件 <div id="app"> <parent></parent> </div>
数据传递
父传递给子
可以通过给子组件设置自定义属性的方式拿到父组件的属性值，子组件用props方法来获取到自定义属性的值就可以直接在子组件的模版中使用了；
let vm=new Vue({ el:'#app', data:{ msg:100 }, components:{ child:{ //props属性写成数组的形式不能进行校验 props:['m'],//相当于取到子组件自定义的m属性，值是父亲的 //写成对象的形式可以校验其值的类型 props:{ m:{ //校验类型拿到的值是否属于下面的类型，不属于也会进行渲染，控制台会提示类型错误 type:[Number,String,Function,Object,Array], default:0//如果子组件没有m属性，则m值默认取0 //如果m属性是必须的，则可增加required:true(不可与default同用) required:true }, }, template:'<div>儿子{{m}}</div>'//这里就可以直接用m } } }) //在页面中使用局部组件 <div id="app"> 父亲：{{msg}} <!--m属于子组件的自定义的属性，前面加了:之后,m的值就变为动态的了-> <child :m="msg"></child>//msg：拿到的是父的数据 </div>
子传递给父
为了防止子组件无意间修改了父组件的状态，props采用的是单向绑定。所以子组件传递给父组件数据就不能通过设置自定义属性的方法，而要通过发布订阅模式来传递；
let vm=new Vue({ el:'#app', data:{ money:400 }, methods:{ things(val){//val：儿子触发事件时传过来的数据 this.money=val; } }, components:{ child:{ props:['m'], //给儿子的按钮添加点击事件，当点击的时候触发发布订阅模式，执行绑定在子组件上的事件 template:'<div>儿子{{m}} <button @click="getMoney()">多要钱</button></div>', methods:{ getMoney(){//此处的this指的是子组件的实例 //触发自定义事件（child），让父亲的方法（things）执行 this.$emit('child',800); } } } } }); //在页面中使用子组件 <div id="app"> 父亲：{{money}} <child :m="money" @child="things"></child> </div>
组件中的插槽（slot标签）
slot标签的作用：定制模版
slot相当于一个插槽，可以把组件中的对应标签拿到之后替换自己里面的内容
slot中可以放一些默认的内容，如果组件中对应slot值的标签有内容则会被替换掉，如果没有则会使用slot中的默认内容
//js let model={ template:'#model' }; let vm=new Vue({ el:'#app', data:{msg:'zf'} methods:{ fn(){alert('是')} }, components:{ model } })
//html <div id="app"> <!--这里放的内容均属于父级模版的(如fn方法)，所以必须在父模版的methods中写fn方法。msg属性也是父模版的。只有自定义的属性名是属于组件的(如m属性)--> <model :m="msg"> <!--下面标签中的slot值与template中的slot是对应的，没有slot值的都会被放到default中--> <a href="www.baidu.com">百度一下</a> <p slot="content">确认删除？</p> <h1 slot="title" @click="fn">是否删除？</h1> <a href="www.baidu.com">百度一下</a> </model> </div> <!--模版中只能有一个根元素--> <!--slot作用，定制模版--> <!--slot相当于一个插槽，可以把组件中的对应标签拿到之后替换自己的内容--> <!--如果组件中没有标签，则使用slot中默认的内容--> <template id="model"> <div> <slot name="title">默认标题</slot> <slot name="content">默认内容</slot> <slot name="default">这是一个默认标题</slot> </div> </template>
如何在父组件中调用子组件中的方法
通过给子组件设置ref值为xxx，在父组件中可通过
this.$refs.xxx找到对应ref值的子组件的vue对象。（子组件的方法也挂载到了它的vue对象上）
由于在mounted执行时，子组件的DOM结构才加载完成，所以只有在mounted函数中才能用this.$refs.xxx.$el拿到对应子组件的DOM元素;
let loading={ data(){ return{flag:true} }, template:'<div>正在加载中……</div>', //子组件的方法 methods:{ hide(){ //此方法中的this是子组件的vue对象 //hide执行的时候会把子组件的DOM元素背景色改为红色 this.$el.style.background='red'; } }, }; let vm=new Vue({ el:'#app', mounted(){ //在此处实现父组件调用子组件的方法 //此处的this是vm，this.$refs获取的不是子组件的DOM而是vue对象； // 可用this.$refs.load.$el来获取对应的DOM结构; this.$refs.load.hide(); }, components:{ loading } }) //Html <div id="app"> <loading ref="load"></loading> </div>
动态组件
component标签
通过使用component标签，我们可以让多个组件使用同一个挂载点，并根据component内置的is属性来实现动态切换（is属性可以理解为是哪一个组件）；
let home={ template:'<div>home</div>', //如果放在了keep-alive标签中，则可以保留它的状态来避免以后点击重新渲染。只在第一次渲染的时候会弹出1 mounted(){alert(1)} }; let list={ template:'<div>list</div>', //如果放在了keep-alive标签中，则只在第一次点击的时候弹出2 mounted(){alert(2)} }; let vm=new Vue({ el:'#app', data:{radio:'home'}, components:{home,list} }) //html <div id="app"> <input type="radio" v-model="radio" value="home">home <input type="radio" v-model="radio" value="list">list <!--keep-alive标签一般用来缓存：现在讲是为了后面的路由做准备，如果缓存了，只会走beforeUpdate与之后的阶段--> <keep-alive> <component :is="radio"></component> </keep-alive> </div>
keep-alive标签
如果想把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。可以把需要缓存的标签外面包一个 keep-alive 标签
<keep-alive> <component :is="radio"></component> </keep-alive>
$nextTick的用法
子组件和父组件都有mounted方法时，会先执行子组件的mounted方法：因为要保证子组件挂载完成再触发父组件的挂载
let vm=new Vue({ el:'#app', mounted(){//想操作最新的DOM，就需要用$nextTick方法（异步的来获取） //未加$nextTick方法，获取的不是最新的DOM console.log(this.$refs.child.$el.innerHTML);//结果为1，2，3 //为了保证操作的是最新的DOM，则需要用$nextTick方法 this.$nextTick(()=>{ console.log(this.$refs.child.$el.innerHTML);//4,5,6(获取到的是最新的结果) }) }, components:{ child:{ data(){ return {arr:[1,2,3]} }, template:'<div><li v-for="a in arr">{{a}}</li></div>', mounted(){//先执行子组件的mounted方法之后再同步执行父组件的mounted方法 this.arr=[4,5,6]//此步骤涉及到DOM渲染，所以说是异步的，而执行父组件的mounted方法时，此步骤还未实现 } } } }) //html <div id="app"> <child ref="child"></child> </div>同级组件之间的数据传递通过EventBus（不用，但要了解）
为了保证订阅和执行的是同一个对象，需要借助第三方实例，通过第三方实例实现发布订阅
EventBus就是用来创建第三方实例的，可用来保证订阅和执行的时候是同一个对象
