vue中＜script setup＞中使用watch、computed、props、defineExpose、defineEmits等方法

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

一些基本用法可以前往Vue3官网查看

props

• 基本用法：

<script setup>
  const props = defineProps({
    foo: String
  })
</script>
//  通过props传过来的是一个静态值，如果需要赋值给双向绑定的数据
<script setup>
  import { toRefs } from 'vue';
    
  const props = defineProps({
    foo: String
  })
  beaselineId.value = toRefs(props).foo.value;
</script>

• 带默认值的props

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

defineExpose()

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

• Vue2：

this.$refs.create.openModal()

• Vue3:

// 组件内部
<script lang="ts" setup>
  import { ref } from 'vue';

  const visible = ref<boolean>(false);
  const openModal = () => {
    visible.value = !visible.value;
  };

  defineExpose({ openModal });
</script>

// 外部调用
<create-global ref="createModal" />

<script lang="ts" setup>
  import { ref } from 'vue';
  import CreateGlobal from './create/create-global.vue';

  const createModal = ref();

  const openModal = () => {
    createModal.value.openModal();
  };
</script>

defineEmits()

父组件

//getGatewayData要获取的参数
<tree :show="show" 
  @gatewayData="getGatewayData">
</tree>
//执行方法获取参数
const getGatewayData = (e) => {
  console.log('getGatewayData', e)
}

子组件

import { ref, defineEmits } from 'vue'
const emits = defineEmits(['handleNodeClick'])
const handleNodeClick = (e) => {
 emits('gatewayData', '子组件的数据')
}