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

vue易犯错误之父子组件传值注意-加冒号和不加冒号区别_第1张图片
下面两种写法有本质的区别:

<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: '
{{count}}---typeof value: {{typeof count}}
'
} var vm = new Vue({ el: '#app', data: {}, components: { Counter: Counter } }); </script> </body>

当用:count="xxx"时:
vue易犯错误之父子组件传值注意-加冒号和不加冒号区别_第2张图片
效果:
在这里插入图片描述
当用count="xxx"时:
vue易犯错误之父子组件传值注意-加冒号和不加冒号区别_第3张图片
效果:
在这里插入图片描述

你可能感兴趣的:(vue,vue,javascript)