Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用

Vue自定义组件:

组件:就是一个大的对象:new Vue({})就是一个组件
定义一个组件:
1.全局组件:
　　

　　　　
　　

　　var Aaa=Vue.extend({
　　　　template:'

我是一个标题

'
　　});
　　Vue.component('aaa',Aaa);

a)给自定义的组件添加数据:
　　data必须是函数的形式,函数必须返回一个对象(json)
　　var Aaa=Vue.extend({
　　　　data(){ //data必须是函数
　　　　　　return{ //必须return一个对象
　　　　　　　　msg:'我是一个标题'
　　　　　　};
　　　　},
　　　　template:'

{ {msg}}

'
　　});
　　Vue.component('aaa',Aaa);

b)给自定义的组件绑定事件
　　var Aaa=Vue.extend({
　　　　data(){ //data必须是函数
　　　　　　return{ //必须return一个对象
　　　　　　　　msg:'我是一个标题'
　　　　　　};
　　　　},
　　　　methods:{ //给自定义的组件绑定事件
　　　　　　change(){
　　　　　　　　this.msg="change";
　　　　　　}
　　　　},
　　　　template:'

{ {msg}}

'
　　});
　　Vue.component('aaa',Aaa); //component放在外部

 

2.局部组件(子组件)
把自定义的组件放到某一个组件内部

==============================================

定义组件的另一种编写方式:
　　

　　　　
　　

1）全局组件：

2）局部组件：

===============================================

配合模板自定义组件:(即template里面的代码)
1.直接放到template里面
　　template:'{ {msg}}'

2.单独放到某一个地方
a)都放到一个script标签里面

b)放到template标签里面(*推荐使用)

===========================================
定义动态组件:
可实现标签切换:

　　
　　
　　 //*自定义动态组件

 

父子组件的定义：

　　

var vm = new Vue({
　　el:'#box',
　　data:{
　　　　a:'aaa'
　　},
　　components:{
　　　　'aaa':{
　　　　　　template:'

我是标题aaa

',
　　　　　　components:{
　　　　　　　　'bbb':{
　　　　　　　　　　template:'

我是标题bbb

'
　　　　　　　　}
　　　　　　}
　　　　}
　　}
});
----------------------------------------------------------------------------------
vue在默认情况下,子组件没法访问父组件的数据
组件之间数据的传递(推荐使用)
1.子组件想获取父组件的data，通过props方法
props有两种写法：
1)props:['m','myMsg']
2)props:{
　　m:String,
　　myMsg:Number
　}

　　

2.父组件想获取子组件的data
*子组件把自己的数据发送到父组件
发送方法:vm.$emit(事件名称,发送的数据)
v-on:接收数据-->@事件名称="函数" (函数写到父组件methods里面,这里没有括号)

　　

-------------------------------------------------------------------------
其他组件之间数据传递方法:
　　vm.$dispatch(事件名,数据) -->子组件向父组件发送数据
　　vm.$broadcast(事件名,数据) -->父级向子级广播数据
这两个需要配合event:{}使用
不推荐使用,因为在vue2.0中已经淘汰了

-------------------------------------------------------------------------

slot的使用：

slot:位置，槽口
作用:占个位置
类似ng里的transclude(指令)

 

我们在定义一个组建的时候，自己定义的template标签内容会把自定义组件内的内容全部覆盖掉，
如下面aaa组件里的ul列表就不会显示出来，被覆盖掉了，但是我们在实际中是不想被覆盖的，
这时就用到slot，避免被占用。
示例一：没有使用slot，aaa组件里的ul列表不会显示出来

　　
　　　　

　　　　　　
• 111

　　　　　　
• 222

　　　　　　
• 333

　　　　

　　

 

 

var vm = new Vue({
　　el:'#box',
　　data:{
　　　　a:'aaa'
　　},
　　components:{
　　　　'aaa':{
　　　　　　template:'#aaa'
　　　　}
　　}
});

 

 

示例2：使用slot，在template标签里预先占一个位置，此时aaa组件里的ul列表显示在h2与p标签的中间

　　
　　　　

　　　　　　
• 111

　　　　　　
• 222

　　　　　　
• 333

　　　　

　　

 

 

var vm = new Vue({
　　el:'#box',
　　data:{
　　　　a:'aaa'
　　},
　　components:{
　　　　'aaa':{
　　　　　　template:'#aaa'
　　　　}
　　}
});

 

 

默认情况下,slot,代表aaa标签里面的所有内容,
有时需要单独代表,

 

　　
　　　　

　　　　　　
• 111

　　　　　　
• 222

　　　　　　
• 333

　　　　

　　　　

　　　　　　
1. 444

　　　　　　
2. 555

　　　　　　
3. 666