Vue3+Ts的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法

原创已于 2022-06-06 09:07:20 修改 · 4.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2022-05-29 17:43:06 首次发布

Vue3 + TypeScript 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Vue.js中Prop、Emit、Computed等核心概念的应用方法，并深入探讨了WatchEffect和Watch的区别及使用场景，同时提供了Provide/Inject的示例。

一、 Prop、Emit

Prop： 通过Prop父组件向子组件传递数据
Emit： 通过Emit子组件向父组件传递数据
父组件

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

<script lang="ts">
import { onMounted, ref, reactive, nextTick, toRefs, computed } from 'vue';//引入所需的api
import Child from './components/Child.vue'; //引入子组件
export default {
  components: {
    Child,
  },
  setup() {
    const propRef = ref('我是父组件通过Ref定义的值');
    const propReactive = reactive({ name: '我是父组件的通过Reactive定义的值', path: 'index' });
    //接收子组件emit传的值
    function getEmitValue(value) {
      console.log('emit的值', value);
    }
    return {
      propRef,
      propReactive,
      getEmitValue,
    };
  },
};
</script>

子组件

<template>
  <div>
    <h2>子组件:</h2>
    <div>
      <h3>Props：</h3>
      <p>propRef：{{ propRef }}</p>
      <p>propReactive：{{ propReactive }}</p>
      <p>propDefault：{{ propDefault }}</p>
    </div>

  <div>
    <h3>Emit：</h3>
    <a-button type="primary" @click="emitToParent">Emit给父组件</a-button>
  </div>
</template>

<script lang="ts">
import { ref, computed, watch } from 'vue';

export default {
  //接收父组件传过来的值
  props: {
    propRef: { type: String },
    propReactive: { type: Object },
    propDefault: { type: String, default: '默认值' },
  },
  //注册所需emit的名称
  emits: ['emitValue'],
  setup(props, context) {
    //传入props,获取props的值，渲染到页面中
    //context ：上下文，包括 attrs 、 emit 、slots

    /** emit使用 start */
    
    //定义emit的值
    const emitValue = ref('我是子组件的emit，我被发射了');
    //通过emit将值emit到父组件
    function emitToParent() {
      context.emit('emitValue', emitValue.value);
    }
   /** emit使用 end */
   
    return {
      props,
      emitValue,
      emitToParent
    };
  },
};
</script>

二、Computed（计算属性）

computed： 是vue的计算属性，它根据依赖关系(如computedvalue1 、computedvalue2 )进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新，一般情况下，computed默认使用的是getter属性

    /** 计算属性 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(value) {
        return computedvalue1.value + computedvalue2.value;
      },
    });

    /** 计算属性 end */

三、WatchEffect

watchEffect： 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

    /* watchEffect start */
    watchEffect(() => {
      console.log('%c [ 通过watchEffect监听watchValue的值的变化 ]-73', watchValue.value);
    });
    /* watchEffect end */

四、Watch

watch： 可以侦听特定的数据源（value、object、array），并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

watch与 watchEffect 相比，watch 允许我们：
1、惰性地执行副作用；
2、更具体地说明应触发侦听器重新运行的状态；
3、访问被侦听状态的先前值和当前值。

<template>
  <div>
    <h3>Watch：</h3>
    <a-button type="primary" @click="addWatch">触发Watch</a-button>
  </div>
</template>

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

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

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

    /** watch 使用end */

五、Provide/Inject

provide 和 inject： 无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

    /* 父组件定义需要通过provide注射到子组件的值 start */
    const provideValueData = reactive({ name: 'provide', type: 'object' });
    provide('provideValue', provideValueData);
    /* 父组件定义需要通过provide注射到子组件的值 end */
    
    /*子组件通过inject接收父组件传过来的值 start*/
     export default {
     inject: ['provideValue'],
     }
    /*子组件通过inject接收父组件传过来的值 end*/