vue易犯错误之父子组件传值注意-加冒号和不加冒号区别

最新推荐文章于 2022-11-23 18:44:45 发布

Akimoto Hiroshi

最新推荐文章于 2022-11-23 18:44:45 发布

阅读量2k

点赞数 6

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

本文链接：https://blog.csdn.net/dyw3390199/article/details/112397634

版权

vue 专栏收录该内容

102 篇文章 5 订阅

订阅专栏

在这里插入图片描述
下面两种写法有本质的区别：

<counter conut="0"></counter>
<counter :conut="0"></counter>

父组件向子组件传值，如果不加:冒号，传过去的不是数值，而是一个字符串
父组件向子组件传值，加上:冒号，传过去的就是一个数值，不是字符串，因为加了:冒号以后引号""里面的内容就是一个js表达式

我们再看一个例子：

<body>
    <div id="app">
        <counter :count="0"></counter>
        <counter :count="1"></counter>
    </div>

    <script>
        var Counter = {
            props: ['count'],
            template: '<div>{{count}}---typeof value: {{typeof count}}</div>'
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            components: {
                Counter: Counter
            }
        });
    </script>
</body>

当用:count="xxx"时：
在这里插入图片描述
效果：

当用count="xxx"时：

效果：

Akimoto Hiroshi

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue易犯错误之父子组件传值注意-加冒号和不加冒号区别

下面两种写法有本质的区别：<counter conut="0"></counter><counter :conut="0"></counter>父组件向子组件传值，如果不加:冒号，传过去的不是数值，而是一个字符串父组件向子组件传值，加上:冒号，传过去的就是一个数值，不是字符串，因为加了:冒号以后引号""里面的内容就是一个js表达式我们再看一个例子：<body> <div id="app"> &lt.
复制链接

扫一扫