vue父组件给子组件传参

最新推荐文章于 2024-03-28 16:53:33 发布

weixin_50413563

最新推荐文章于 2024-03-28 16:53:33 发布

阅读量165

点赞数 1

分类专栏： vue 文章标签： vue html

本文链接：https://blog.csdn.net/weixin_50413563/article/details/108295806

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

父组件给子组件传惨
1、在占位符中 :a=“fmsg” fmsg父组件的数据 a代表的是在子组件中使用的数据
2、在子组件中定义props属性接收父组件传递过来的数据 props:[‘k’,‘k’]

案例：

<body>
        <div id="app">
            <h1 @click="change()">这是父组件{{num}}</h1>
            <v-header :a="fmsg" :b="num"></v-header>
        </div>

        <template id="header">
            <div>
                这是子组件{{a}}
                <p>{{b}}</p>
            </div>
        </template>

        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'#header',
                props:['a','b']
            }
            new Vue({
                el:'#app',
                data:{
                    fmsg:'这是父组件的数据',
                    num:0
                },
                components:{
                    'v-header':header
                },
                methods:{
                    change(){
                        this.num++
                    }
                }
            })
        </script>
    </body>

weixin_50413563

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父组件给子组件传参

父祖家给子组件传惨1、在占位符中 :a=“fmsg” fmsg父组件的数据 a代表的是在子组件中使用的数据2、在子组件中定义props属性接收父组件传递过来的数据 props:[‘k’,‘k’]案例：<body> <div id="app"> <h1 @click="change()">这是父组件{{num}}</h1> <v-header :a="fmsg" :b="num"
复制链接

扫一扫