组件之间通信:
通过props,子组件可以获取父组件的数据。但是子组件无法通知父组件数据发生变化。以及父组件无法获取子组件内的数据。所以,通过$on,$emit来通知父组件; 父组件通过v-ref来获取子组件的dom。
因为组件之间是独立的,数据互不干涉。
(1) 直接访问:
1) $parant: 父组件实例
2) $children: 所有子组件实例
3) $root : 组件所在的根实例
这三个属性都挂载在组件的this上。
(2) 通过 $on, $emit通信
我们可以给DOM元素绑定一个非原生的事件.然后通过手动调用$emit方式来进行事件的触发。
1)events已经被抛弃;
2) $on方法,监听事件
Var vm = new Vue({
el : ‘#app’,
data : {
todo: []
},
methods : {
begin : function(){
this.$on( ’add’, function(msg) ){
this.todo.push(msg);
}
}
}
});
3) $emit 在实例本身身上触发事件,以及如果本身没有被触发,那么会冒泡到父组件。
var vm = new Vue({
created: function(){
this.$on( ’add’, fucntion( msg ){
this.todo.push(msg);
} );
},
methods: {
onclock: function(){
this.$emit( ’add’, ‘there is a messafe’ );
}
}
});
(3) 子组件索引
Vue通过绑定机制,只需要操作数据,dom就会做出变化。但是也有时候需要操作dom,Vue.js提供了直接访问子组件的方式。
<child-todo v-ref:first></child-todo>
1) 在父组件中可以通过this.$ref.first的方式获取子组件的实例。 其实v-ref可以获取任意一个dom。
2)如果v-ref作用在v-for绑定的元素上,那么父组件获取的this.$refs.items为一个数组,包含响应的子组件实例。
通过props,子组件可以获取父组件的数据。但是子组件无法通知父组件数据发生变化。以及父组件无法获取子组件内的数据。所以,通过$on,$emit来通知父组件; 父组件通过v-ref来获取子组件的dom。
因为组件之间是独立的,数据互不干涉。
(1) 直接访问:
1) $parant: 父组件实例
2) $children: 所有子组件实例
3) $root : 组件所在的根实例
这三个属性都挂载在组件的this上。
(2) 通过 $on, $emit通信
我们可以给DOM元素绑定一个非原生的事件.然后通过手动调用$emit方式来进行事件的触发。
1)events已经被抛弃;
2) $on方法,监听事件
Var vm = new Vue({
el : ‘#app’,
data : {
todo: []
},
methods : {
begin : function(){
this.$on( ’add’, function(msg) ){
this.todo.push(msg);
}
}
}
});
3) $emit 在实例本身身上触发事件,以及如果本身没有被触发,那么会冒泡到父组件。
var vm = new Vue({
created: function(){
this.$on( ’add’, fucntion( msg ){
this.todo.push(msg);
} );
},
methods: {
onclock: function(){
this.$emit( ’add’, ‘there is a messafe’ );
}
}
});
(3) 子组件索引
Vue通过绑定机制,只需要操作数据,dom就会做出变化。但是也有时候需要操作dom,Vue.js提供了直接访问子组件的方式。
<child-todo v-ref:first></child-todo>
1) 在父组件中可以通过this.$ref.first的方式获取子组件的实例。 其实v-ref可以获取任意一个dom。
2)如果v-ref作用在v-for绑定的元素上,那么父组件获取的this.$refs.items为一个数组,包含响应的子组件实例。