父组件利用ref控制子组件

gunsmoke

于 2020-05-18 10:35:00 发布

阅读量423

点赞数

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/106188047

版权

vue学习专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="main">
    <child ref="childref"></child>
    <button @click="parent">执行子组件事件</button>
</div>

<script>
    Vue.component('child',{
        template:`
            <div>
                {{childText}}
            </div>
        `,
        data() {
            return {
                childText: '子组件文本'
            }
        },
        methods: {
            childClick(msg) {
                alert('子组件事件,' + msg)
            }
        }
    });

    new Vue({
        el: '#main',
        data: {
            childPassParent: ''
        },
        methods: {
            parent(event) {
                // 这么写耦合度太高,但是很方便,this.$refs.childref实际上就得到了子组件的引用
                this.$refs.childref.childClick('父组件的信息');
            }
        }
    })
</script>

</body>
</html>