Vue中的父组件向子组件传值

最新推荐文章于 2024-05-24 15:48:22 发布

stdue

最新推荐文章于 2024-05-24 15:48:22 发布

阅读量105

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fationopen/article/details/112677759

版权

该代码示例展示了在Vue.js中如何进行父组件向子组件的数据传递。通过使用props属性，子组件接收到父组件传递的`title`和`content`值，并在模板中显示。最终输出为子组件内部结合自身数据与父组件传递的数据展示内容。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>{{pmsg}}</div>
        <menu-item title='来自父组件的值'></menu-item>
        <menu-item :title='ptitle' content='hello'></menu-item>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        /*
            父组件向子组件传值
        */
        Vue.component('menu-item', {
            props: ['title', 'content'],
            data: function () {
                return {
                    msg: '子组件本身的数据'
                }
            },
            template: '<div>{{msg+"----"+title+"----"+content}}</div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件中内容',
                ptitle: '动态绑定属性'
            }
        });
    </script>
</body>

</html>

上述代码最终的输出结果为
在这里插入图片描述
父组件向子组件传值。顾名思义，带有值本身的组件即为父组件，而带有“插槽”的组件即为子组件

红框即为父组件部分，黄框即为子组件部分
子组件通过属性 props 来接收父组件所传递过来的值，进而输出
在这里插入图片描述

stdue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的父组件向子组件传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id
复制链接

扫一扫