标签：允许 function 事件总线 vue 动态 改变 selected 写法 git
写在前面：
1.父组件的data写法与子组件的data写法不同
//父组件 data:{ //对象形式 } //子组件 data:function(){ return { //函数形式 } }
2.引用子组件遵循
以下实例全部使用以下模板
<div id="app"> //父组件 <p>{{total}}</p> <mime @increment1="incrementTotal" ref="child" :num-a="total" num-s="total"></mime> <button type="button" @click="clickref">调用子组件</button> </div> //子组件 <template id="myInput"> <button @click="add">{{counter}}</button> </template> <script> new Vue({ el:‘#app‘, data :{ total: 0 }, methods:{ incrementTotal : function(){ }, clickref:function(){ } }, components:{ ‘mime‘ :{ template:‘#myInput‘, data : function(){ return{ counter : 0 } }, props:[‘numA‘,‘numS‘], methods:{ add : function(){ } } } } }); </script>
1.父子通信 之 静态数据
如果只是传单一的字符串
<mime num-s="total"></mime> .... props:[‘numS‘] // numS 为字符串 total
这样子组件的numS一直为total。但这种太不灵活
2.父子通信 之 动态数据
父组件的数据将会动态传递给子组件
<input v-model="total"> <mime :num-a="total"></mime> .... //props:[‘numA‘] props:{ numA:[ String , Number ] //允许字符串 数字 }
这时当input输入什么，子组件的numA将会得到什么
3.父子通信 之 子调用父
{{total}} <mime @increment="incrementTotal"></mime> <template id="myInput"> <button @click="add">{{counter}}</button> </template> ...
<script>
.... data:{ tatal: 0 }, methods:{ incrementTotal:function(){ this.total +=1; } }, components:{ data : function(){ return:{ counter : 0 } }, methods : { add : function(){ this.counter +=1; this.$emit(‘increment‘); //子组件通过 $emit触发父组件的方法 increment 还可以传参 this.$emit(‘increment‘ ,this.counter); } } }
</script>
子组件执行add --> 触发$emit --> 触发父组件increment --> 执行 incrementTotal 方法
4.父子通信 之 父调用子
<mime ref="child"></mime>
<button type="button" @click="clickref">调用子组件</button>
<template id="myInput">
<button @click="add">{{counter}}</button>
</template>
...
<script>
....
methods:{
clickref:function(){
var child = this.$refs.child; //获取子组件实例
child.counter = 45; //改变子组件数据
child.add(11); //调用子组件方法 add
}
},
components:{
data : function(){
return:{
counter : 0
}
},
methods : {
add : function(num){
this.counter +=1;
console.log(‘接受父组件的值：‘,num) //num为11
}
}
}
</script>
通过在子组件上引用ref,从而获得子组件实例，进行相应操作。
5.子组件与子组件通信
官网：在简单的场景下，使用一个空的 Vue 实例作为中央事件总线
var bus = new Vue()
// 触发组件 A 中的事件 bus.$emit(‘id-selected‘, 1)
// 在组件 B 创建的钩子中监听事件 bus.$on(‘id-selected‘, function (id) { // ... })
但是这样实在太麻烦了，建议使用vuex
标签：允许 function 事件总线 vue 动态 改变 selected 写法 git
原文地址：http://www.cnblogs.com/QRL909109/p/6166209.html
