vue父访问子组件中的数据方法，使用$refs

最新推荐文章于 2024-09-20 14:40:38 发布

原创最新推荐文章于 2024-09-20 14:40:38 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

VUE3 专栏收录该内容

54 篇文章

订阅专栏

这篇文章介绍了如何在Vue.js中创建子组件并实现数据的父子组件间传递，通过实例展示了模板、data属性和v-on:click事件的使用。

@{
    ViewData["Title"] = "children";
}
<h1>@ViewData["Title"]</h1>

<div id="app">
    <cpn ref="cpnref"> </cpn>
    <button v-on:click="btnclick">按鈕</button>
</div>

<template id="cpn">
 <div>我是子組件</div>
</template> 

<script src="~/js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'test',
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return { message: '子組件的數據信息傳遞' }
                }
            }
        },
        methods: {
            btnclick() {
                console.log('aaa', this.$refs.cpnref.message)
            }
        }
    })

 

</script>