vue组件传值（父子）

_enzo

已于 2022-08-28 12:29:34 修改

阅读量86

点赞数

分类专栏： Vue.js 文章标签： vue

于 2021-08-18 11:40:46 首次发布

本文链接：https://blog.youkuaiyun.com/katherin_wanzi/article/details/119776803

版权

Vue.js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Vue.js中组件间的通信方式，包括父组件如何通过props向子组件传递数据，以及子组件如何通过$emit向父组件发送事件并传递值。示例代码详细展示了这两个过程，有助于理解Vue.js组件通信的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件向子组件传值

在这里插入图片描述

<body>
    <!--父组件-->
    <div id="app">
        <Cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
    <!--子组件-->
    <template id='cpn'>
        <div>
            <ul>
                <li v-for="item in cmovies">{{item}}</li>
            </ul>
            <h1>{{cmessage}}</h1>
        </div>
    </template>
    
    <script>
        //  子组件，父传子props
        const Cpn = {
            template: '#cpn',
            //  1.props: ['cmovies', 'cmessage'],
            //  2.类型限制
            //  props: {
            //    cmovies: Array,
            //    cmessage: String
            //},
            props: {
                //3.提供一些默认值
                cmessage: {
                    type: String,
                    default: 'aaaaa'
                },
                cmovies: {
                    type: Array,
                    default() {
                        return [];
                    }
                }
            },
            data() {
                return {

                }
            },
            methods: {

            }
        }
        //  父组件
        const App = new Vue({
            el: '#app',
            data: {
                message: '你好',
                movies: ['hhh', 'mmm', 'kkk']
            },
            components: {
                Cpn
            }
        })
        const Obj = {

        }
    </script>
</body>

2.子组件向父组件传值

在这里插入图片描述

<body>
    <!--父组件-->
    <div id="app">
        <cpn @itemclick='cpnClick'></cpn>
    </div>
    <!--子组件-->
    <template id="cpn">
        <div>
            <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
        </div>
    </template>
    
    <script>
        //  子组件
        const cpn = {
            template: '#cpn',
            data() {
                return {
                    categories: [
                        { id: 'aaaa', name: '热门推荐' },
                        { id: 'bbbb', name: '手机数码' },
                        { id: 'cccc', name: '家用家电' },
                        { id: 'dddd', name: '电脑办公' },
                    ]
                }
            },
            methods: {
                btnClick(item) {
                    //  子组件发射一个事件
                    this.$emit('itemclick', item);
                }
            },
        }
        //  父组件
        const App = new Vue({
            el: '#app',
            data: {
                message: '你好',
                movies: ['hhh', 'mmm', 'kkk']
            },
            components: {
                cpn
            },
            methods: {
                cpnClick(item) {
                    console.log(item.name);
                }
            }
        })
    </script>
</body>