父子组件之间传值&＃xff08;Function&＃xff09;,callback在vue中的应用
父子组件之间传值的方法众所周知&＃xff0c;这里再提一下&＃xff1a;
1.子组件向父组件传值
在子组件中绑定事件&＃xff1a;
$emit(‘方法名’&＃xff0c;子组件默认传给父组件的值)
在父组件中监听这个事件&＃xff1a;
v-on:方法名&＃61;‘方法’&＃xff0c;在父组件methods里写这个方法
2.父组件向子组件传值
父组件&＃xff1a;通过v-bind绑定传给子组件的值,例如(:msg&＃61;‘false’)
子组件&＃xff1a;通过props接受父组件的值&＃xff0c;例如(props:[‘msg’])
现在介绍的是第三种方法callback&＃xff0c;callback实际上实现的是function在父子组件之间的来回传递
第一步&＃xff1a;和父组件向子组件传值相似&＃xff0c;不同的是v-bind绑定的是传给子组件的函数&＃xff0c;既然要把函数传给子组件&＃xff0c;必然要现在父组件内定义这个函数
第二步&＃xff1a;子组件通过props接受从父组件传过来的这个函数&＃xff0c;然后调用这个函数&＃xff0c;这个函数的参数可以是值和函数&＃xff0c;如果是值可以通过子组件把这个值传给父组件。如果是函数&＃xff0c;父组件可以通过函数带参把这个参数传给子组件
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>父子组件传递Function</title><script src&＃61;"js/vue.js"></script>
</head>
<body>
<div id&＃61;"app"><vue-callback :callback&＃61;"callback1"></vue-callback>
</div>
<script>let app &＃61; new Vue({el: &＃39;#app&＃39;,data() {return {}},components:{&＃39;vue-callback&＃39;:{name: &＃39;vue-callback&＃39;,template: &＃96;点击我组件向父组件传递function,父组件处理后返回给子组件数据
&＃96;,props:{callback:Function },methods: {daCall(str){this.callback(str,(getFather&＃61;>{console.log(getFather)}))}}}},methods: {callback1(str,c){console.log(str);c(&＃39;给子组件&＃39;);}}});
</script>
</body>
</html>
以上通过callback实现了父组件Fuction传递给子组件&＃xff0c;同时也实现了父子组件之间相互传值
京公网安备 11010802041100号