Vue3+Ts＜script setup＞组合式API的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject、Ref用法

一、页面效果图

二、父组件代码

<template>
  <div class="user-box">
    <div>
      <h2>父组件:</h2>
      <p>propRef：{{ propRef }}</p>
      <p>propReactive：{{ propReactive }}</p>
    </div>

    <div>
      <Child :propRef="propRef" :propReactive="propReactive" @emitValue="getEmitValue" ref="childRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, nextTick, toRefs, computed, provide } from 'vue';
import Child from './components/Child.vue'; //引入子组件

const childRef = ref(); //定义子组件的ref

const propRef = ref('我是父组件通过Ref定义的值'); //定义传入子组件的值

const propReactive = reactive({ name: '我是父组件的通过Reactive定义的值', path: 'index' }); //定义传入子组件的对象

const provideValueData = reactive({ name: 'provide', type: 'object' }); //定义provide传入子组件的对象

provide('provideValue', provideValueData); //通过provide发射给子组件

//
function getEmitValue(value) {
  console.log('子组件emit的值', value);
}

onMounted(() => {
  console.log('打印子组件的ref对象', childRef.value);
});
</script>

<style type="text/css" lang="less">
.user-box {
  padding: 20px;
}
</style>

三、子组件代码

<template>
  <div>
    <h2>子组件:</h2>
    <div>
      <h3>Props：</h3>
      <p>propRef：{{ propRef }}</p>
      <p>propReactive：{{ propReactive }}</p>
      <p>propDefault：{{ propDefault }}</p>
    </div>
    <div>
      <h3>Computed：</h3>
      <p>computerMode1：{{ computerMode1 }}</p>
      <p>computerMode2：{{ computerMode2 }}</p>
    </div>
  </div>
  <div>
    <h3>Emit：</h3>
    <a-button type="primary" @click="emitToParent">Emit给父组件</a-button>
  </div>

  <div>
    <h3>Watch：</h3>
    <a-button type="primary" @click="addWatch">触发Watch</a-button>
  </div>
  <div>
    <h3>inject</h3>
    <div>data:{{ provideValue }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, watchEffect, defineEmits, defineProps, withDefaults, inject } from 'vue';
/*定义父组件传过来Props值的类型 start */
interface Props {
  propRef: string;
  propReactive: any;
  propDefault?: string;
}
//接收父组件传过来的值设置默认值
const props = withDefaults(defineProps<Props>(), {
  propRef: '',
  propReactive: { name: '', path: '' },
  propDefault: '',
});

/*定义父组件传过来Props值的类型 end */

/* inject接收父组件provide传过来的值 start */
const provideValue = inject('provideValue');
/* inject接收父组件provide传过来的值 end */

/** emit使用 start */

//注册emit
const emits = defineEmits(['emitValue']);

//定义emit的值
const emitValue = ref('我是子组件的emit，我被发射了');

//通过定义的emits将值发射到父组件
function emitToParent() {
  emits('emitValue', emitValue.value);
}

/** emit使用 end */

/** watch 使用start */
//定义watch被监听的值
const watchValue = ref(1);

function addWatch() {
  watchValue.value++;
}

watch(
  watchValue,
  (oldValue, newValue) => {
    console.log('[ oldValue,newValue ]', oldValue, newValue);
  },
  { immediate: true, deep: true }
);

/** watch 使用end */

/* watchEffect start */
watchEffect(() => {
  console.log('通过watchEffect监听watchValue的值的变化:', watchValue.value);
});
/* watchEffect end */

/** 计算属性 start */
//定义计算属性值
const computedValue1 = ref(1);
const computedValue2 = ref(10);

//写法一
const computerMode1 = computed(() => {
  return computedValue1.value + computedValue2.value;
});

//写法二
const computerMode2 = computed({
  get() {
    return computedValue1.value + computedValue2.value;
  },
  set() {
    return computedValue1.value + computedValue2.value;
  },
});

/** 计算属性 end */

/* 定义被父组件可以访问的值或方法 start */
const childValue = ref('我是子组件的值');
function childFunction() {
  console.log('我是子组件的方法');
}
/* 定义被父组件可以访问的值或方法 end */

/* 只有defineExpose暴露的值或方法才能被父组件通过ref访问 start */
defineExpose({
  childValue,
  childFunction,
});
/* 只有defineExpose暴露的值或方法才能被父组件通过ref访问 end */
</script>