前言
主要是有关vue组件的笔记，然后也不想为了定blog而写blog,所以应该会写一些真的自己想记下来的东西，也希望可以尽量精简的写
组件用法
需要注册才能使用组件，注册分为局部注册和全局注册，代码示例如下：
必须在实例注册，组件才可以使用
1
2
3
4
5
6
7
8
9
10
11
12
| //全局注册
Vue.component("组件名",{
//选项
});
//局部注册
var 组件名 ={
//选项
}
html模板如下：
<组件名></组件名
|
组件选项
template
temlplate后面是要渲染的内容，必须有一个元素包围它，代码如下：
注意v-show不能用在template中，可以使用v-if
1
2
3
4
| Vue.component("组件名",{
template: '<div></div>';
});
|
data
data的用法与实方法相同，不同的是要将数据return出去，代码如下：
1
2
3
4
5
6
7
8
9
10
| Vue.component("组件名",{
.....
data : function{
return {
mws: "text"
}
}
});
|
props
props主要是用来接收来自父组件的数据，可以是字符串数组和对象
注意数据是单向的，只能父组件传到子组件
代码如下：
1
2
3
4
5
6
7
8
9
| html:
<mytext message="text"></mytext>
js：
Vue.component("mytext",{
props:['message']
});
|
props的数据可以进行验证，代码如下：
1
2
3
4
5
6
7
8
| props: {
message : {
type:Number， //类型
default:""text //如果没有定义的默认值
}
}
}
|
wath
主要是用来监听props的值的改变，从而通知父组件或者更新props值
代码如下
1
2
3
4
5
6
| watch:{
message: function(val){
//当message发生改变时触发的函数
//val 为更新后的message值
}
}
|
组件通信
父组件向子组件通信
使用上面的props即可
子组件向父组件通信
使用自定义事件，子组件用$emit()来触发向父组件通信的事件代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
| html:
<mytext @send="handle"></mytext>
//其中send为子组件发送过来的参数，为自定义事件的名称
Vue.component("mytext",{
template:'<button @click="hadles">',
methods:{
hadles: function(){
this.$emit('handle',数据);
//第一个参数为事件名称，第二个为发送的数据
}
}
});
|
可以使用v-model来简化，不过个人感觉没有必要，所以不想写在这里做总结。。。。。。
非父子组件通信
在vue.js2.x中使用一个空的vu实例来作中介，组件把自定义事件名称和数据发送到这个空实例，其它实例或组件通过监听空实例的自定义事件来刷新数据
代码如下：
1
2
3
| var bus =new Vue();
bus.$emit('clicks',mes);
bus.$on('clicks',function(){});
|
补充：
当子组件较多时，可以用ref属性为组件指定一个索引名称：代码如下:
1
2
3
4
| html代码如下：
<mytext ref="A></mytext>
//调用指定的子组件的message
var msg=this.$refs.comA.message
|
slot
slot是内容分发，用在将父组件的dom结构挂载，它与props,events触发事件构成组件的3个APi来源.
slot的作用域是在父组件上
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <mytext>
<p></p>//挂载内容
</mytext>
Vue.component("mytext",{
template:'
<div>
<slot>
<p></p>//没有内容时的默认内容
</slot>//父组件的内容将挂载在slot里面
</div>
'
});
|
可以给slot指定一个name，使用分发指定内容代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
| <mytext>
<p slot="one"></p>//挂载内容,slot为具名slot
</mytext>
Vue.component("mytext",{
template:'
<div>
<slot>
<p></p>//没有内容时的默认内容
</slot>//父组件的内容将挂载在slot里面
<slot name="one">//具名slot将分发在这里
</div>
'
|
也可以指定数据传递到父组件的挂载里，使用scope,代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <mytext>
<p slot="one" scope="props">
{{props.msg}} //显示子组件的msg
</p>//挂载内容,slot为具名slot,props为临时变量
</mytext>
Vue.component("mytext",{
template:'
<div>
<slot>
<p></p>//没有内容时的默认内容
</slot>//父组件的内容将挂载在slot里面
<slot name="one" msg="数据">//具名slot将分发在这里
//msg为向父组件传递的数据
</div>
'
|
可以使用$slots访问分发的内容
1
| var header =this.$slots.one;
|
结语
还有许多关于组件的高级用法，不过我不是大佬，等以后用到再写吧。写完收工睡觉
