vue中prop传值时加不加v-bind(冒号:)

前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单。

由于结果记起来很容易,所以先给出结果:
只有传递字符串常量时,不采用v-bind形式,其余情况均采用v-bind形式传递。

传入String类型

传入的值title为一个常量(静态prop)时,不加v-bind(或者:)

<blog-post title="My journey with Vue"></blog-post>

传入的值title为一个变量(动态prop)时,加v-bind(或者:)

<blog-post v-bind:title="titleValue"></blog-post>

传入Number类型

<!-- 无论静态的'42'还是变量totalNumber(动态)的值为42,我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:total="42"></blog-post>
<blog-post v-bind:total="totalNumber"></blog-post>

传入Boolean类型

<!-- 无论静态的'false'还是变量booleanValue(动态)的值为false,我们都需要 `v-bind` 来告诉 Vue -->
<base-input v-bind:favorited="false">
<base-input v-bind:favorited="booleanValue">

传入一个数组

<!-- 无论静态的'[234, 266, 273]'还是变量commmetArray(动态)的值为[234, 266, 273],我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<blog-post v-bind:comment-ids="commmetArray"></blog-post>

传入一个对象

<!-- 无论静态的"{name:'bob'}"还是变量postObject(动态)的值为{name:'bob'},我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:post="{name:'bob'}"></blog-post>
<blog-post v-bind:post="postObject"></blog-post>

总结

根据以上说明,可以看出只有当字符串以静态/常量形式传递时,才不需要也不能用v-bind传递。为什么不能用v-bind传递呢?我觉得主要是为了区分以下场景

<!-- 此时value为数值,计算1+value的值为25 -->
<blog-post v-bind:value="24"></blog-post>
<!-- 此时value为字符串,计算1+value的值为124 -->
<blog-post value="24"></blog-post>
<!-- 此时value为布尔值 -->
<blog-post v-bind:value="false"></blog-post>
<!-- 此时value为字符串 -->
<blog-post value="false"></blog-post>

对于数组和对象,道理也是一样。即不加v-bind时,vue就认为此时通过prop传递给组件的是字符串常量。

原文地址:https://www.cnblogs.com/youhong/p/8964942.html

时间: 2024-10-03 20:01:34

vue中prop传值时加不加v-bind(冒号:)的相关文章

js中调用函数时加不加括号的问题

其实总结起来如下:函数只要是要调用它进行执行的,都必须加括号.此时,函数()实际上等于函数的返回值.当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码.不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码.它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行. 所以一般时候我们都是采用的是无括号的原因.这也是由于括号的二义性,因为括号是"函数调用运算符",相当于在执行这样

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1.require.ensure()实现按需加载

PHP中使用foreach时加&amp;符号的用法

foreach时加&符号:遍历的同时改变原数组即修改数据或者增加数据. $arr = ['a', 'b', 'c']; foreach ($arr as $key => &$value) { $value = $value . '111'; } echo json_encode($arr); // ["a111","b111","c111"],这里改变了原来数组的值 使用&可能出现的问题: $arr = ['a',

vue中 的传值问题 父传子和子传父

vue中 关于$emit的用法 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h

vue中使用base64进行加解密

vue进行Base64加解密 背景 项目中需要对特殊字符进行处理,避免json和数据库的特殊字符(""等)冲突,刚好学了信息安全,干脆整个加解密,wkk.. 使用步骤 打开dos,在项目根目录运行npm install --save js-base64 在组件中引入let Base64 = require('js-base64').Base64 使用 Base64.encode(明文) Base64.decode(密文) 原文地址:https://www.cnblogs.com/quj

vue中使用图片预加载

1; npm i vue-lazyload 2: 在main.js里 import vuelazyload from 'vue-lazyload'; Vue.use(vuelazyload,{ loading: '/static/1.jpg'   // 图片没加载出来之前显示的图片 }) 3:  <img v-lazy="item.url" > 原文地址:https://www.cnblogs.com/cs122/p/10156598.html

Vue中router路由异步加载组件-优化性能

何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加载小的js文件的开销大:所以当首页一次性加载的文件太大时,可以使用异步加载组件的写法. 原先写法: 异步加载写法: 不仅路由内可以使用异步加载,组件内也可使用异步加载,建议只有当app.js大于1M时再使用: 原文地址:https://www.cnblogs.com/nayek/p/11824987

Spring将classpath下的 .properties文件数据读出放到map中,在初始化时加载

因为项目需要需要将配置文件中的键值对读出放到map中 格式为: 001=123456789 Appcontext.xml中添加配置: <bean id="loadKeyFromProperties" class="com.:landau.init.LoadKeyFormProperties"> <property name="keyFileResource"> <value>classpath:keys.pro

vscode 在vue中使用v-for时下面有红线

这种情况可以 1.绑定一个key可以解决 2.在设置里面,添加下面一句话,有时需要重启一下vscode才会生效 "vetur.validation.template": false 这样就ok了 原文地址:https://www.cnblogs.com/xk-g/p/9160780.html