安装Element-Plus与v-model在vue3组件中的使用

安装Element-Plus

1.安装Element-Plus

# 选择一个你喜欢的包管理器# NPM
npm install element-plus --save# Yarn
yarn add element-plus# pnpm
pnpm install element-plus

2.main.ts中导入

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)app.mount('#app')

  在 tsconfig.json 中

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

 

v-model在vue3组件中的使用

1.v-model在输入框中的使用

 <div style="padding: 20px;background-color: gray;"><!-- 1. v-model在输入框中的使用 --><!-- 等价于 :value + @input --><!-- <input type="text" v-model="phone"> --><input type="text" :value="phone" @input="dealInput"></div>

2.v-model在单选和多选标签上

 <!-- 2.v-model在单选和多选标签上 等价于 :checked + @change --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>性别:</span><!-- <input v-model="gender" name="gender" value="男" type="radio">男<input v-model="gender" name="gender" value="女" type="radio">女 --><input name="gender" value="男" :checked="gender === '男'" type="radio" @change="changeGender">男<input name="gender" value="女" :checked="gender === '女'" type="radio" @change="changeGender">女</div><!-- 3. v-model在多选标签上 等价于 :checked + @change --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>爱好:</span><input v-model="hobbies" name="hobby" type="checkbox" value="看书">看书<input v-model="hobbies" name="hobby" type="checkbox" value="打球">打球<input v-model="hobbies" name="hobby" type="checkbox" value="爬山">爬山<div>用户的爱好是: {{ hobbies }}</div></div>

3. v-model在下拉框中选择

<!-- 4. v-model在下拉框中选择 --><div style="padding: 20px;background-color: gray; margin-top: 20px;"><span>选择喜欢的城市:</span><select name="city" v-model="city"><option value="北京">北京</option><option value="南京">南京</option><option value="东京">东京</option><option value="上京">上京</option></select><div>用户喜欢的城市是: {{ city }}</div></div>

4. v-model在自定义组件上的使用

父组件：

<script setup lang="ts">
import ChildOne from '@/components/ChildOne.vue';
import { ref } from 'vue';const money = ref(100);
const car = ref('自行车');</script><template><div class="father">父组件-钱包:{{ money }}车辆:{{ car }}<!-- <ChildOne :model-value="money" @update:modelValue="money += $event" /> --><ChildOne v-model="money" v-model:car="car" /></div></template><style scoped>
.father {width: 600px;height: 600px;background-color: orange;
}
</style>

子组件：

<script setup lang="ts">defineProps<{modelValue: number,car: string
}>()const emits = defineEmits<{(e: 'update:modelValue', money: number): void,(e: 'update:car', car: string): void
}>()</script><template><div class="child-one"><div>子组件</div><p> 钱包: {{ modelValue }} </p><button @click="emits('update:modelValue', modelValue + 100)">搬砖一个月</button><button @click="emits('update:car', 'su7')">换车</button></div>
</template><style scoped>
.child-one {width: 200px;height: 200px;background-color: pink;
}
</style>