Vue 给组件传参,写入数字没有问题,但直接写入固定字符串报错?
代码如下:
institution组件在新增、编辑时显示输入框,在查看详情时显示文本
<template>
<div class="z-input">
<div class="txt" v-if="isDetail">{{inputValue}}</div>
<el-input
v-else
:placeholder="zplaceholder?zplaceholder:选择机构"
size="small"
v-model="val"
:disabled="zdisabled"
@focus="loadInstitution"
@change="changeVal"
></el-input>
</div>
</template>
<script>
现在调用方法如下:
在:inputValue中输入“我的组织”,界面怎么都无法显示。
<institution :isDetail="true" :inputValue="我的组织" @modelVal="(val) => { query.sampleDeptName = val }"
@modelId="(val) => { query.sampleDeptId = val }" style="width:100%" >
</institution>
但:inputValue中输入"111",界面能正常显示"111"。
而且将:inputValue中的值替换为data()中的变量,也可以,那这就奇怪了。
最后,试验半天,在字符串前后加上单引号,就搞定了。
:inputValue=" ' 我的组织' "
总结一下:
vue组件传参必须带上自己的类型,例如单引号,虽然冗余了标识。
附:或者不用动态绑定,去掉冒号。
如下:
inputValue="我的组织"