深入理解vue组件
一、组件使用过程中的细节问题
1.使用 is 解决H5标签的小bug（用 is='组件名' 解决）
好处：这样的写法一方面可以使用组件，另一方面也符合H5的规范。
/*创建组件*/ Vue.component('row',{ template:'<tr><td>this is a row</td></tr>'; }); /*vue实例接管#root*/ new Vue({ el:'#root' });
<div id='root'> <table> <tbody> <row></row> <!-- 如果直接写组件名字，源代码渲染中会出错，<tr>标签会成为table的兄弟元素，--> <tr is='row'></tr> <!--正确写法：正常写<tr>标签，然后 is='row'（组件名）--> <tr is='row'></tr> </tbody> </table> </div>
2.在子组件中定义 data 时，data 必须是个有返回值的函数，不能向父组件中一样定义。
原因：子组件需要被网页中的元素多次使用，通过一个函数返回一个对象的目的，就是让每个子组件都拥有一个独立的数据存储，就不会出现多个子组件相互影响的问题。
Vue.component("row",{ //组件名row
data:function(){ //函数
return { //有返回值
content:'this is a row'
}
},
template='<li>{{content}}</li>' //模板
});
3.获取DOM节点（vue是面向数据的开发，极少操作DOM）
用法：
1.在标签中添加 ref='ref名字' 例如：ref='hello'
2.使用Vue内置属性获取，$.refs.ref名字 例如：$refs.hello
当写在div标签中：使用 this.$refs.hello 获取的是 DOM节点
当写在组件中：使用 this.$refs.hello 获取的是子组件的引用
<div ref='dv' @click='dvClick'> ref 可以获取DOM节点 </div>
new Vue({ el:'root', methods:function(){ dvClick:function(){ console.log(this.$refs.dv); //<div> ref 可以获取DOM节点</div> } } }
4.案例：计数器
<div class="root"> <row @change='sumChange' ref='num1'></row> <!--第二步：监听子组件的触发事件，一旦触发事件，就执行sumClick方法--> <row @change='sumChange' ref='num2'></row> <!--第二步：监听子组件的触发事件，一旦触发事件，就执行sumClick方法--> <div>{{total}}</div> </div>
// 全局子组件 Vue.component('row', { data: function() { return { number: 0 } }, template: "<div @click='spanClick'>{{number}}</div>", methods: { spanClick: function() { this.number++; this.$emit("change"); //第一步：子组件向父组件触发一个名叫change的事件 } } }); // 实例组件 new Vue({ el: '.root', data: { total: 0 }, methods: { sumChange: function() { //console.log(this.$refs.num1.number);//获取子组件中number的值 this.total = this.$refs.num1.number + this.$refs.num2.number; } } });
二、父子组件的数据传递
1.父组件向子组件传递数据（属性）
父组件通过属性的方式向子组件中传递数组
<div count='0'> count后面跟的0 是字符串</div> <div :count='2'> :count后面跟着的2 是数字，因为:count后面的是表达式</div>
子组件使用props接收父组件传递过来的数据
var counter={ props:['count'], //接收父组件传递过来的数据 template:'<div>{{count}}</div>' };
注意：
有一个隐形规定：单向数据流
在vue中有单向数据流的概念：父组件可以随意向子组件传递数据，但是子组件不能修改父组件传递过来的值。
设置单向数据流，是为了防止，如果父组件传递过来的是对象形式的，在子组件中修改后，如果再被其他子组件引用，也会把其他子组件的数据一起更改了。
解决方式：
把父组件传递过来的值，赋值给子组件 data 中，找个数据接收。
var counter={ props:['count'], //接收父组件传递过来的数据 data:function(){ return { number:this.count //把父组件的值赋值给子组件的data，此时再修改，不会影响父组件中的值 } }, template:'<div @click="dvClick">{{number}}</div>', methods:{ dvClick:function(){ this.number++; } } });
2.子组件向父组件中传递数据（通过事件传值）
<div id='root'> <counter :count='3' @change='changeTotal'></counter><!--第二步：监听change事件，一旦触发，就执行changeTotal方法--> <counter :count='2' @change='changeTotal'></counter> <div>{{total}}</div> </div>
var counter={ props:['count'], data:function(){ return { number:this.count } }, template:'<div @click="dvClick">{{number}}</div>', methods:{ dvClick:function(){ this.number++; this.$emit('change',1); //第一步：每次点击时向外触发一个change事件，可以携带多个参数 } } }); new Vue({ el:'root', data:{ total:5 }, components:{ //把局部组件在实例中声明 counter:counter }, methods:{ changeTotal:function(step){ //实现子组件触发事件，父组件监听到后的处理函数 this.total+=step; } } });
三、组件参数校验与非props特性
如果 子组件 要校验 父组件 参数 类型则：
props: { //content:String //校验参数 content 是否是 String 类型 //content: [String, Number] //校验参数 content 是否为 Sting 或 Number中的一种类型 content: { type: String, //类型 required: false, //false：有没有都可以，true：必须有content这个变量 default: '默认文本内容', //默认文本内容，如果有content属性，则显示content的内容 validator: function(value) { //对传入的值校验 return value.length > 5; //true 判断值的长度是否大于5 } } }
props特性：
1.要求父组件传参数，子组件要接收，然后可以在子组件中直接使用
2.props特性，不会将属性显示在DOM的标签之中
非props特性：
1.父组件中定义了参数，子组件中没有接收，此时父组件中定义的参数就是非props特性，非props特性的内容，也就无法在子组件中使用。
2.非props特性的元素会展示在子组件最外层的DOM标签的HTML属性里面
四、给组件绑定原生事件（.native）
方式一：给子组件绑定事件，通过父组件监听触发事件
缺点：代码编写太麻烦
<child @click='childClick'></child><!--在组件中定义的事件属于自定义事件，不是原生事件--> <!--方式一：给子组件绑定事件，通过父组件监听触发事件--> <child @change='clickEvent'></child><!--监听子组件中是否触发了change-->
// 方式一：子组件绑定原生事件：直接在编写模板中绑定，通过向父组件触发事件达到效果，另外父组件中必须监听子组件的change事件有没有被触发 Vue.component=({ template:'<div @click='childClick'>此时绑定的是原生事件</div>, methods:{ childClick:function(){ this.$emit('change');//通过childClick的点击，向父组件中触发一个名叫 change 的事件 } } });
方式二：
更改监听事件的指向（.native）
<child @click.native='childClick'></child><!--此时监听的不再是子元素的自定义事件，而是父组件的原生事件-->
// 方式二：更改监听事件的指向（native） Vue.component=({ template:'<div>child</div>', }); new Vue({ el:'#app', methods:{ childClick:function(){ console.log('通过子组件的@click.native可以直接调用此方法'); } } });
五、非父子组件之间传值
也叫作Bus、总线、发布订阅模式、观察者模式
<div id='root'> <child content='Dell'></child> <child content='Lee'></child> </div>
Vue.prototype.bus=new Vue(); //vue原型属性bus，指向vue的实例，任何一个组件和实例中都有bus的属性 Vue.component({ props:{ content:String //判断接收的数据是否是String类型 }, data:{ childContent:this.content }, template:'<div @click="dvClick">{{childContent}}</div>', //定义模板 methods:{ dvClick:function(){ this.bus.$emit('change',this.childContent); //通过bus向整个vue触发一个change事件，并携带一个this.childContent的数据（此时其他子组件想使用这个数据，应该在组件中设置监听） } }, //生命周期钩子：组件被挂载的时候执行的函数 mouted:function(){ var that=this; this.bus.$on('change',function(msg){ that.content=msg; }); }); new Vue({ el:'#root' });
六、Vue中的插槽（slot）
方便向子组件中传递DOM元素
<div class='root'> <child></child><!--子组件中没有DOM结构--> </div> Vue.component=('child',{ template:`<div> <p>子组件内容</p> <slot>默认内容</slot> /* 但是模板中定义了<slot>，则会显示插槽中默认文字 */ </div>` });
显示效果：
<div class='root'> <p>子组件内容</p> 默认内容 </div
具体使用方法：
<div class='root'> <pages> <div class='header' slot='header'>header</div><!--向子组件中插入DOM节点--> <div class='footer' slot='footer'>footer</div><!--向子组件中插入DOM节点--> </pages> </div>
new Vue({ el:'.root' }); Vue.component('pages',{ template:`<div> <slot name='header'>Header</slot> //name 指定显示哪个DOM结构，和DOM中的 slot 相呼应 <div class='content'>Content</div> //原来子组件中要显示的内容 <slot name='footer'>Footer</slot> </div>` });
七、Vue中的作用域插槽
子组件模板可能在不同的地方被调用，不希望模板的样式被child给固定，希望模板样式由父组件告诉我们应该使用哪种样式
<div class='app'> <child> <template slot-scope='props'> <h1>{{props.item}}</h1> <!--下面ul中的循环内容，父元素使用 h1 标签显示--> </template> </child> </div>
/* 父组件调用子组件时，给子组件传了一个插槽（作用域插槽），作用域插槽必须是<template>开头结尾的标签 ，同时作用域插槽要声明，要从子组件中接收的数据都放在哪（props）还告诉子组件一个模板的信息，接收到props后以什么形式展示。 何时使用：当子组件做循环，或者某一部分由外部传递进来的时候，这时候就是用作用域插槽。 子组件可以向父组件的插槽中插入数据。父组件传递过来的插槽如果想接收这个数据，必须在外层使用一个template ，同时通过 slot-scote 对应的名字（props）来接收子组件传递过来的所有数据 子组件传了一个item 给父组件，在父组件的作用域插槽中就可以接收到这个item。 */ Vue.component('child',{ data:function(){ return { list:[1,2,3,4,5] } }, template:`<div> <ul> <slot v-for='item of list' :item=item ></slot> </ul> </div>` });
八、动态组件<component>与v-once
v-once：会把数据存放在内容（提高加载静态数据的速度）
template:'<div v-once>数据会被存放到内存中</div>'
动态组件：会根据 is 里面的数据的变化，自动加载不同的组件(底层在切换时，会先销毁一个组件，然后展示另外一个组件（消耗性能）)
<div class='root'> <component :is='type'></component> </div>
Vue.component("child-one",{
template:"<div>child-one</div>"
});
Vue.component("child-two",{
template:"<div>child-two</div>"
});
new Vue({
el:'#root',
data:{
type:'child-one'
},
methods:{
btnClick:function(){
this.type=(this.type==='child-one'?'child-two':'child-one');
}
}
});
