vue.js 使用props和〈script setup>设置输入属性

kcugc4gi  于 2023-03-19  发布在  Vue.js
关注(0)|答案(4)|浏览(188)

是否可以使用prop设置表单输入类型?
下面的方法似乎不起作用,还有其他方法吗?
例如

<script setup>
defineProps({
  InputType: String,
  InputId: String,
  InputLabel: String,
  InputPlaceholder: String
});
</script>
<template>
  <div class="ml-6 mt-5 mr-6 mb-5 lg:w-1/2">
    <label
      :for="InputId"
      class="block text-sm font-medium leading-6 text-gray-900"
    >
      {{ InputLabel }}
    </label>
    <div class="mt-2">
      <input
        :id="InputId"
        :type="InputType"
        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6"
        :placeholder="InputPlaceholder"
      />
    </div>
  </div>
</template>
n53p2ov0

n53p2ov01#

仔细阅读文档中关于如何使用<script setup>的 prop 。必须指定defineProps的值,这样 prop 才能在模板中使用。

const props = defineProps({
    InputType: String,
    InputId: String,
    InputLabel: String,
    InputPlaceholder: String,
})
<label :for="props.InputId">{{ props.InputLabel }}</label>
<div class="mt-2">
  <input :type="props.InputType" :id="props.InputId" v-bind:placeholder="props.InputPlaceholder">
</div>

注意: prop 可以在模板中自动展开,因此可以使用InputId代替props.InputId。只有在<script setup>中的其他地方使用时才严格需要

yks3o0rb

yks3o0rb2#

子组件应该使用camelCase名称inputLabel而不是InputLabel来定义props:

defineProps({
  inputType: String,
  inputId: String,
  inputLabel: String,
  inputPlaceholder: String
});

并且它们应在父组件中使用,如:
<Child input-label="somee label"/><Child inputLabel="somee label"/>

现场演示

cnjp1d6j

cnjp1d6j3#

您可以使用一个 prop “type”来呈现基于它的输入。

<script setup>
const props = defineProps({
    type: {type: String, default: ''},
    formField: {type: Object, default: {}}
    }) 
<script>
    
<template>
    <div v-if="type === 'text'">
    </div>
    <div v-if="type === 'file'">
    </div>
    <div v-if="type === 'checkbox'">
    </div>
</template>
v8wbuo2f

v8wbuo2f4#

碱性溶液。
如果需要重新加载组件,请选中如何强制Vue组件重新渲染。

const { createApp } = Vue

const MyInput = {
  props: ['type'],
  template: 'Type: {{type}} <br/> <input :type="type" />'  
}

const App = {  
  components: {
    MyInput
  },
  data() {
    return {
      type: 'text',
      types: ['text', 'radio', 'checkbox']
    }
  },
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
  Type: <select v-model="type">
  <option v-for="t in types">{{t}}</option>
  </select><br/>
  <my-input :type="type"></my-input>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

相关问题