Vue3.0学习 - 第十三节，Vue3 setup中如何使用计算属性computed ，父子组件如何传值

拼搏现实的明天。 2023-01-18 13:21 14阅读 0赞

### 在vue2中我们可以使用计算属性 computed  去定义一个计算属性并且去计算 ###

代码片段：

data() {
        return {
          num1: 0,
          num2: 0,
        };
      },
      computed: {
        result() {
          return parseInt(this.num1) + parseInt(this.num2);
        },
      },

我们可以知道是 num1和num2的和等于result

### 在vue3中我们如何使用computed ###

代码：

<template>
      <div class="hello">
        <h1>{
       {msg}}</h1>
        <input type="text" v-model="state.num1" >
        <span> + </span>
        <input type="text" v-model="state.num2" >
        <span> = </span>
        {
       {state.result}}
      </div>
    </template>
    
    <script>
    import { reactive, computed } from "vue";
    export default {
      name: "HelloWorld",
      props: {
        msg: String,
      },
     
      setup() {
        let state = reactive({
          num1: 0,
          num2: 0,
          result: computed(() => {
            return parseInt(state.num1) + parseInt(state.num2);
          }),
        });
        return { state };
      },
    };
    
    // 方法单独抽离
    // function reacFun() {
    //   // 声明
    //   let state = reactive({
    //     num1: 0,
    //     num2: 0,
    //     result: 0,
    //   });
    //   // 逻辑
    //   let add = () => {
    //     console.log("123");
    //     state.result = parseInt(state.num1) + parseInt(state.num2);
    //   };
    //   // 返回
    //   return { state, add };
    // }
    </script>
    
    
    <style scoped lang="scss">
    
    </style>

我们可以看到可以直接在定义的reactive中直接使用computed

let state = reactive({
          num1: 0,
          num2: 0,
          result: computed(() => {
            return parseInt(state.num1) + parseInt(state.num2);
          }),
        });

### 父子传值： ###

vue2 是通过 this.$emit()

vue3是如何传值呢？

## `setup()方法接受两个参数` ##

*  **入参：**
    
     *  `{Data} props`
     *  `{SetupContext} context`

interface Data {
      [key: string]: unknown
    }
    
    interface SetupContext {
      attrs: Data
      slots: Slots
      emit: (event: string, ...args: unknown[]) => void
    }
    
    function setup(props: Data, context: SetupContext): Data

我们可以给set传两个参数 **setup(props,ctx)** ,因为es6可以解构 所以我们可以这样写 **setup(props,\{emit\})**

setup(props,{emit}) {
        console.log("setup---props",props)
    
        let state = reactive({
          num1: 0,
          num2: 0,
          result: computed(() => {
            return parseInt(state.num1) + parseInt(state.num2);
          }),
        });
    
        let send = ()=>{
          console.log("send",state.result)
          emit('sendMsg',state.result)
        }
    
        return { state,send };
      },

这样我们就可以把我们父组件传递来的 props 直接可以在setup中拿到 直接打印，子组件通过emit向父组件传参  和vue2方法一样

父组件：

<template>
      <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App" @sendMsg="handler" />
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      setup(){
        //子组件传参
        let handler = value => {
          console.log("handler",value)
        }
    
        return {handler}
      }
    }
    </script>

### 结论： ###

**父组件  ——>  子组件 ：props      setup(props,ctx)**

**子组件 ——> 父组件 ：emit      setup(props,\{emit\})\{ emit('sendMsg',state.result) \}  或 setup(props,ctx) \{  ctx.emit('sendMsg',state.result) \}**

**注意：**

**在vue3中使用 emit可能会报错警告：**

> Extraneous non-emits event listeners (sendMsg) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

问题解决：

export default {
      name: "HelloWorld",
      emits: ["sendMsg"],//添加这一行解决
      props: {
        msg: String,
      },
      setup(props, ctx) {
        console.log("setup---props", props);
      
    
        let state = reactive({
          num1: 0,
          num2: 0,
          result: computed(() => {
            return parseInt(state.num1) + parseInt(state.num2);
          }),
        });
    
        let send = () => {
          console.log("send", state.result);
          ctx.emit("sendMsg", state.result);
        };
        return { state, send };
      },
    };