Vue3里面的setup上下文应用示例

defineEmits和defineProps

父组件参数

<template>
  <div>
    <h2>子组件联动的与使用</h2>
    <!-- reactive这样 -->
    <!-- <childCom v-model:user="data.user" v-model="money" /> -->
    <!-- ref这样 -->
    <childCom v-model:user="user" v-model="money" />
  </div>
</template>
​
<script setup>
import childCom from './components/childCom.vue';
import { reactive, ref } from 'vue';
​
/**
 * todo 这样子组件重新赋值就不是响应式了
 * const data = reactive({
    name: '张三',
    age: 28
  })
 */
// 应该这样写
/* const data = reactive({
  user: {
    name: '张三',
    age: 28
  }
}) */
// 这个跟上面的响应式一样
const user = ref({
  name: '张三',
  age: 28
})
const money = ref(10000)
</script>

defineEmits：触发事件（函数，等价于 $emit)

defineProps：父组件传过来的值进行类型验证

<template>
  <div>
    <div ref="child">这是子组件的ref</div>
    <div>父组件传过来的值</div>
    <div>
      <span>姓名： {{ props.user.name }}</span>
      <span style="padding-left: 10px;">年龄： {{ props.user.age }}</span>
    </div>
    <div>还剩余存款：{{ props.modelValue }}</div>
    <div>
      <el-button @click="$emit('update:modelValue', props.modelValue - 1000)">向父亲要1000元生活费</el-button>
      <el-button @click="handleInfo">过了一年父亲大了一岁</el-button>
    </div>
  </div>
</template>
​
<script setup>
// 接收父组件传过来的值
// 一个子组件只接收一个默认的v-model值
const props = defineProps({
  // 接收v-model:user的值，不自定义名称的话默认就叫v-model
  user: {
    type: Object,
    default: () => {}
  },
  // 接收v-model的值，不自定义名称的话默认就叫v-model
  modelValue: {
    type: Number,
    default: 0
  }
})
​
const $emit = defineEmits(['update:modelValue', 'update:user'])
​
const handleInfo = () => {
  const info = {
    name: props.user.name,
    age: props.user.age + 1
  }
  $emit('update:user', info)
}
</script>

defineExpose

-暴露公共属性（函数）

父组件获取

<template>
  <div>
    <h2>子组件联动的与使用</h2>
    <!-- reactive这样 -->
    <childCom ref="child" />
    <hr>
    <div>
      <el-button @click="handleChild">获取子组件方法/数据/DOM实例</el-button>
    </div>
  </div>
</template>
​
<script setup>
import childCom from './components/childCom.vue';
import { ref } from 'vue';
// 定义获取单个子组件,名称要跟子组件名一样
const child = ref()
function handleChild() {
  // 子组件方法
  console.log(child.value.childFun());
  // 子组件的数据
  console.log(child.value.info.childInfo);
  // 子组件的DOM实例
  console.log(child.value.getChildDomData());
}
</script>

子组件定义暴露方法

<template>
  <div>
    <div ref="child">这是子组件的ref</div>
  </div>
</template>
​
<script setup>
import { ref } from 'vue'
const child =  ref(null)
const info = ref({
  childInfo: '子组件信息cc'
})
function childFun() {
  console.log('这是子组件方法');
}
function getChildDomData() {
  const text =  child.value.textContent
  return text
}
​
// 暴露子组件的方法、属性等
defineExpose({
  childFun,
  info,
  getChildDomData
})
</script>

defineSlots

-插槽（非响应式的对象，等价于 $slots)：defineSlots 用于声明组件内部的命名插槽，该API是在 < script setup> 里使用的。仅支持 Vue 3.3+ 的版本。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了

<script setup lang="ts">
import { defineSlots } from 'vue'
​
const slots = defineSlots({
  header: () => h('header'),
  content: () => h('div', {}, [h('p', {}, 'Hello, world!')]),
  footer: () => h('footer')
})
</script>

defineModel

-props的进阶版，相当于props + emit：需要vue3.4+版本

父组件

<template>
  <div>
    <h2>子组件联动的与使用</h2>
    <!-- reactive这样 -->
    <!-- <childCom v-model:user="data.user" v-model="money" /> -->
    <!-- ref这样 -->
    <childCom v-model:user="user" v-model="money" />
  </div>
</template>
​
<script setup>
import childCom from './components/childCom.vue';
import { ref } from 'vue';
​
const user = ref({
  name: '张三',
  age: 28
})
const money = ref(10000)
</script>

子组件1：普通用法

<template>
  <div>
    <div ref="child">这是子组件的ref</div>
    <div>父亲剩余存款：{{ money }}</div>
    <div>
      <el-button @click="handlePay">向父亲要1000元</el-button>
    </div>
    <div>
      <h5>父亲的个人信息</h5>
      <div>
        <div>姓名：{{ user.name }}</div>
        <div>年龄：{{ user.age }}</div>
      </div>
      <div>
        <el-button @click="addAge">+1岁</el-button>
      </div>
    </div>
  </div>
</template>
​
<script setup>
// 父级默认的v-model
const money = defineModel({type: Number, default: 0})
// 父级v-model声明的名称
const user = defineModel("user", {type: Object, default: () => {}})
const handlePay = () => {
  // 直接减少
  money.value -= 1000
}
function addAge() {
  user.value.age += 1
}
</script>

-props的进阶版+指令验证

父组件：关键代码，其它的跟上面一样

<childCom v-model.trim="money" />

子组件：修饰符验证方法1

<template>
<div>父亲剩余存款：{{ modelValue }}</div>
<div>
    <el-button @click="handlePay(1000)">向父亲要1000元</el-button>
</div>
</template>
<script setup>
// 父级默认的v-model, modelModifiers可以做验证
const [modelValue, modelModifiers] = defineModel({
  type: Number, 
  default: 0
})
const handlePay = (val) => {
  // 有对应的修饰符指令
  if (modelModifiers.trim) {
    // 验证是不是数字，是就直接减少
    if (Number(val)) {
      modelValue.value -= val
    } else {
      Promise.reject(new Error('请传入数字'))
    }
  }
}
</script>

子组件：修饰符验证方法2

<template>
<div>父亲剩余存款：{{ modelValue }}</div>
<div>
    <el-button @click="handlePay">向父亲要1000元</el-button>
</div>
</template>
<script setup>
// modelModifiers可以做验证
const [modelValue, modelModifiers] = defineModel({
  type: Number, 
  default: 0,
  set(value) {
    if(modelModifiers.trim) {
      // 验证是不是数字，是就直接减少
      if (Number(value)) {
        return value
      } else {
        return Promise.reject(new Error('请传入数字'))
      }
    }
    return 0
  }
})
const handlePay = () => {
  // modelValue.value -= '你好' // 会提示报错
  modelValue.value -= 1000
}
</script>

defineOptions

这个宏可以用来直接在 <script setup> 中声明组件选项，而不必使用单独的 <script>,vue版本要3.3+版本

<template>
  <div>
    <div>这是内容</div>
  </div>
</template>
​
<script setup>
defineOptions({
  inheritAttrs: false, // 对class等不要默认挂在根节点上
  name: 'ChildOption' // 对组件名称重命名，在chrome的Vue DevTools下可以看到
})
</script>