快捷導(dǎo)航

Vue組件上使用v-model之單選框

更新時間：2022年10月13日 16:24:24 作者：Zhouxs-_-

這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

先給大家介紹下Vue組件上使用v-model之單選框的實例代碼。

子組件內(nèi)容：

<template>
  <div>
    <input
      type="radio"
      :id="valueName"
      :value="valueName"
      :checked="picked === valueName"
      :picked="picked"
      @click="$emit('change', $event.target.value)"
    />
    <label :for="valueName">{{ valueName }}</label>
  </div>
</template>

<script>
export default {
  props: ["picked", "valueName"],
  model: {
    prop: "picked",
    event: "change",
  },
  computed: {},
  methods: {},
};
</script>

<style>
</style>

父組件內(nèi)容：

<template>
  <div>
    <child-radio
      v-for="valueName in valueNames"
      :key="valueName"
      v-model="picked"
      :valueName="valueName"
    ></child-radio>
    顯示父組件單選的內(nèi)容:{{ picked }} -->
  </div>
</template>

<script>
import ChildRadio from "./ChildRadio.vue";
export default {
  components: { ChildRadio },
  data() {
    return {
      picked: "", //
      valueNames: ["One", "Two", "Three"],
    };
  },
};
</script>

<style>
</style>

vue組件v-model

vue中數(shù)據(jù)數(shù)據(jù)流向

vue中數(shù)據(jù)流向是單向的，也就是說我們不能直接修改props中的值所以我們都會

<template>
    <div>
        <Renderer :data='data' @updateValue='updateValue'/>
    </div>
</template>
<script setup>
	我這里使用unplugin-auto-import所以不必導(dǎo)入ref
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
    這樣的方式修改父組件給我們傳遞的值
    const  updateValue = (value) =>{
		data.value = value;
	}
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="loadValue ">
    </div>
</template>

<script setup>
	const  emit =  defineEmits();
	let  content =  ref('');
	const  loadValue = () => {
		emit('updateValue', content.value);
	}
</script>

因為這中操作太頻繁了所以vue新增v-model:data='data‘這種方式修改父組件數(shù)據(jù)

<template>
    <div>
    	 第一個data是，如果需要修改，修改當(dāng)前組件的那個值
        <Renderer v-model:data="data"/>
    </div>
</template>

<script setup>
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="updateValue">
    </div>
</template>

<script setup>
	let  content = ref('');
	const  emit =  defineEmits();
	const  updateValue = ()=>{
	emit('update:data', content.value);
	}
</script>

現(xiàn)在v-model可以自定義修飾符

	//vue2提供的修飾符
	v-model.trim(去掉兩端空格)
	v-model.number(只輸入number)
	v-model.lazy(change事件觸發(fā))

<template>
    <div>
        <Renderer v-model:data.capitalize="data"/>
        {{data}}
    </div>
</template>

<script setup>
    import  Renderer from  "./components/Render.vue"
    let  data = ref('0');
</script>

<template>
    <div>
        <input type="text" v-model="content" @input="updateValue" />
    </div>
</template>

<script setup>
const props = defineProps({
    dataModifiers: Object
});
let content = ref('');
const emit = defineEmits();
const updateValue = () => {
    if (props.dataModifiers.capitalize) {
         content.value = content.value.charAt(0).toUpperCase() +  content.value.slice(1)
    }
    emit('update:data', content.value);
}
</script>

到此這篇關(guān)于Vue組件上使用v-model之單選框的文章就介紹到這了,更多相關(guān)Vue 使用v-model單選框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: