1. 模版中直接使用声明的变量

<!-- <script setup>中无需 return 声明的变量、函数以及 import 引入的内容，即可在<template/>使用 -->
<!-- 在 template 中直接使用声明的变量、函数以及 import 引入的内容 -->
<template>
  <div @click="log">{{ msg }}</div>
  <p>{{ getToday() }}</p>
</template>

<script setup>
//import引入的内容
import { getToday } from './utils'
// 变量
const msg = 'Hello!'

function log() {
  console.log(msg)
}
</script>

2. 组件通信:

• 父组件:

<template>
  <div>父组件</div>
  <Child :title="msg" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './child.vue'
const msg = ref('父的值') //自动返回，在template直接解套使用
</script>

• 子组件:

<template>
  <div>子组件</div>
  <div>父组件传递的值：{{ title }}</div>
</template>
<script setup>
//import {defineProps} from 'vue'   不需要引入
//语法糖必须使用defineProps替代props
const props = defineProps({
  title: {
    type: String
  }
})
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>

• defineEmit 代替 emit，子组件向父组件传递数据（子组件向外暴露数据）

子组件
<template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('我是子组件')
//1、暴露内部数据
const emits = defineEmits(['childFn'])
const toEmits = () => {
  //2、触发父组件中暴露的childFn方法并携带数据
  emits('childFn', name)
}
</script>

<!-- 父组件 -->
<template>
  <div>父组件</div>
  <Child @childFn="childFn" />
  <p>接收子组件传递的数据{{ childData }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './child.vue'

const childData = ref(null)
const childFn = e => {
  consloe.log('子组件触发了父组件childFn，并传递了参数e')
  childData = e.value
}
</script>

3. 主动向父组件暴露子组件属性

<!-- 子组件代码： -->
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

<template>
  <div>父组件</div>
  <Child ref="childRef" />
  <button @click="getChildData">通过ref获取子组件的属性</button>
</template>
<script setup>
import { ref } from 'vue'
import Child from './child.vue'
const childRef = ref() //注册响应数据
const getChildData = () => {
  //子组件接收暴露出来得值
  console.log(childRef.value.a) //1
  console.log(childRef.value.b) //2  响应式数据
}
</script>

4. useSlots 和 useAttrs

• 子组件

<template>
  <Child msg="非porps传值子组件用attrs接收">
    <!-- 匿名插槽 -->
    <span>默认插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h1>具名插槽</h1>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </Child>
</template>
<script setup>
// 引入子组件
import Child from './child.vue'
</script>

• 父组件

<template>
  <!-- 匿名插槽 -->
  <slot />
  <!-- 具名插槽 -->
  <slot name="title" />
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
  <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
  <p>{{ attrs.msg == $attrs.msg }}</p>
  <!--true  没想到有啥作用... -->
  <p>{{ slots == $slots }}</p>
</template>
<script setup>
import { useSlots, useAttrs, reactive, toRef } from 'vue'
const state = reactive({
  name: '张三',
  age: '18'
})
const slots = useSlots()
console.log(slots.default()) //获取到默认插槽的虚拟dom对象
console.log(slots.title()) //获取到具名title插槽的虚拟dom对象
// console.log(slots.footer()); //报错  不知道为啥有插槽作用域的无法获取
//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。
const attrs = useAttrs()
</script>

5. 多个 script 标签共存

<script>
import { defineComponent } from 'vue'
import { PullRefresh } from 'vant'

export default defineComponent({
  name: 'Test',
  components: {
    [PullRefresh.name]: PullRefresh
  }
})
</script>

<script setup>
// 这里是不需要 return的代码
</script>

文章链接 (opens new window)