安装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>