vue 父子组件的方法调用

2018-08-26 17:26:36来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

$emit 子组件触发父组件的方法:

 1 <!-- 子组件 -->
 2 <template>
 3     <div id="child">
 4         <button @click="tryToParent">click</button>
 5     </div>
 6 </template>
 7 <script>
 8 export default {
 9     name: 'child',
10     methods:{
11         tryToParent(){
12             // 通过$emit进行触发
13             // 第一个参数为父组件监听的事件名,后续参数为父组件方法的参数
14             this.$emit("toParent","我从子组件传来")
15         }
16     }
17 }
18 </script>
19 
20 <!-- 父组件 -->
21 <template>
22     <div id="parent">
23         <!-- 监听child的toParent事件广播,用fromChild进行处理 -->
24         <child @toParent="fromChild"></child>
25     </div>
26 </template>
27 <script>
28 import child from "./child.vue"
29 export default {
30     name: 'parent',
31     components:{child},
32     methods:{
33         fromChild(msg){
34             console.log(msg);  // 点击子组件的button,这里最终打印出“我从子组件传来”
35         }
36     }
37 }
38 </script>

 

$refs 父组件获取子组件实例,进而调用子组件方法或者直接修改子组件属性:

 1 <!-- 子组件 -->
 2 <template>
 3     <div id="child">
 4         <div>{{message1}}</div>
 5         <div>{{message2}}</div>
 6     </div>
 7 </template>
 8 <script>
 9 export default {
10     name: 'child',
11     data(){
12         return {
13             message1:"",
14             message2:""
15         }
16     },
17     methods:{
18         fromParent(msg){
19             this.message1 = msg
20         }
21     }
22 }
23 </script>
24 
25 <!-- 父组件 -->
26 <template>
27     <div id="parent">
28         <button @click="toChild">click</button>
29         <child ref="child"></child>
30     </div>
31 </template>
32 <script>
33 import child from "./child.vue"
34 export default {
35     name: 'parent',
36     components:{child},
37     methods:{
38         toChild(){
39             /** this.$refs.child返回child组件实例 **/
40 
41             // 调用子组件的fromParent方法
42             this.$refs.child.fromParent("我从父组件传递过来")
43             // 直接修改child的data
44             this.$refs.child.message2 = "啦啦啦"
45         }
46     }
47 }
48 </script>

 

  在复杂的vue应用中,应该用vuex的store来管理跨组件的数据交流,再根据数据的变化触发相应的方法。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:IE浏览器关于ajax的缓存机制

下一篇:angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定