vue.js中的子组件与父组件，prop传递数据

最新推荐文章于 2024-06-16 12:25:20 发布

有一个王小森

最新推荐文章于 2024-06-16 12:25:20 发布

阅读量2.8k

点赞数

分类专栏： vue.js 文章标签： vue-js 子组件父组件 prop

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/74732436

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：
子组件与父组件的关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop</title>
    <script src="vue.js"></script>
</head>
<body>
<!--div为父组件，child为子组件-->
<div id="app">
    {{message}}
    <child message="hi!"></child>
    <!--此处若不声明message，不会继承父组件的属性值。-->
</div>
<script>
    //先声明组件，才能使用组件。
    Vue.component('child', {
//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）
        props: ['message'],
        template: '<p>{{ message }}</p>'
    });
    new Vue({
        el: '#app',
        data: {
            message: "hello"
        }
    });
</script>
</body>
</html>

以上是自己的理解，仅供参考，若有错误与不足，欢迎指正
由于上面的实例哪一部分属于父组件，哪部分属于子组件不是太明了，可以和下面的实例想对照，这样会比较清晰一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop</title>
    <script src="vue.js"></script>
</head>
<body>
<!--div#app为父组件，child为子组件-->
<div id="app">
</div>
<script>
    //先声明组件，才能使用组件。
    Vue.component('child', {
//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）
        props: ['message'],
        template: '<p>{{ message }}</p>'
    });
    new Vue({
        el: '#app',
        data: {
            message: "hello"
        },
        template:'<div>{{message}}<child message="hi!"></child></div>'
        //child为在父集中引用的子组件
    });
</script>
</body>
</html>

有一个王小森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
vue.js中的子组件与父组件，prop传递数据

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：子组件与父组件的关系：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Prop&am
复制链接

扫一扫

专栏目录