vue的模板的父子组件使用，并且实现数据传递

最新推荐文章于 2025-05-17 16:05:51 发布

原创最新推荐文章于 2025-05-17 16:05:51 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

VUE3 专栏收录该内容

54 篇文章

订阅专栏

本文展示了使用 Vue.js 进行父子组件数据传递的示例，包括创建组件、定义数据、方法及组件间的交互。通过`<mycom>`组件，传递`movies`和`message`属性，并在子组件中展示。同时，文章还包含了一个简单的子组件`firstcom`的定义，以及使用内联模板定义的组件模板。

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

<div id="app">
    @*这里测试父子组件的数据传递*@
    <mycom  v-bind:cmovies="movies" :cmessage="message"></mycom>

    @*<mycnp></mycnp>*@

</div>

<template id="cpnParent">
    <div>
        <h1> html 代碼的組件測試</h1>
        <h1>{{title}}</h1>
        <h2>当前计数 {{counter}}</h2>
        <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button>

        <h1>
            {{cmovies}}

        </h1>
        <h1>
            {{cmessage}}

        </h1>

        <firstcom></firstcom>
    </div>
</template>

<template id="cpnChildren">
    <div>
        <h1> html 代碼的-----子組件測試</h1>
    </div>
</template>

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

<script>


    //全局組件
    //Vue.component('mycnp', {
    //    template:'#cpn'
    //})

    const app = new Vue({
        el: '#app',
        data: {
            message: '我定义的一个消息',
            movies:['黑客帝国','美丽人生','宇宙旅行']
        },
        components: {
            mycom: { //父子组件的命名一定要弄清楚，否者会报错
                template: '#cpnParent',
                props:['cmovies','cmessage'],
                data() {//这里是组件存放数据的方法
                    return {
                        title: 'components data test',
                        counter:0
                    }
                },
                methods: {
                    increment(){
                        this.counter++
                    },
                    decrement() {
                        this.counter--
                    }
                },
                components: {
                    firstcom: {
                        template: '#cpnChildren',
                        //data: function () {
                        //    return {}
                        //},
                    }
                }
            }
        }

  
    })

</script>