vue---父调子 $refs （把父组件的数据传给子组件）

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30439131

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whyue/p/6374589.html

本文介绍了一个简单的Vue.js应用中如何实现父组件向子组件传递数据的方法。通过点击按钮触发事件，父组件将信息传递给子组件，并展示了具体的代码实现。

ps:App.vue 父组件

　 Hello.vue 子组件

App.vue :

<template>
    <div id="app">
        <input type="button" name="" id="" @click="parentCall" value="父调子" />
        <hello ref="chil" />//hello组件
    </div>
</template>

<script>
    import hello from './components/Hello'
    export default {
        name: 'app',
        'components': {
            hello
        },
        methods: {
　　        parentCall () {
　　　　        this.$refs.chil.chilFn('我是父元素传过来的')
　　        }
        }
    }
</script>

/*Hello.vue  :*/

<template>
    <div class="hello"></div>
</template>

<script>
    export default {
        name: 'hello',
        'methods': {
　　       chilFn (msg) {
　　　　     alert(msg)
　　      }
        }
    }
</script>