vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用...

weixin_33962621

于 2017-09-05 16:15:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/null11/p/7479189.html

本文介绍了一个使用Vue.js实现父子组件间通信的例子。具体地，展示了如何通过ref属性获取子组件实例，并调用其公开的方法。这种方法可以使得父组件能够直接触发子组件内部的行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //父亲调用子组件的方法，子组件暴露一些方法让父组件调用
    // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例
    let vm=new Vue({
        el:"#app",
        template:'<child ref="c"></child>',
        //一定要放在mounted下面，因为mounted方法表示数据和视图渲染完成，
        mounted(){
            //当前的ref指向的是child组件的实例，通过实例调用下面的fn方法
            this.$refs.c.fn();
        },
        components:{
            child:{
                template:'<div>child</div>',
                methods:{
                    fn(){
                        alert("子子")
                    }
                }
            }
        }
    })
</script>
</html>