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

在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>
    {{}}
  </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 = () => {
//     ("123");
//      = parseInt(state.num1) + parseInt(state.num2);
//   };
//   // 返回
//   return { state, add };
// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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}) {
    ("setup---props",props)

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

    let send = ()=>{
      ("send",)
      emit('sendMsg',)
    }

    return { state,send };
  },

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

父组件：

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your  App" @sendMsg="handler" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(){
    //子组件传参
    let handler = value => {
      ("handler",value)
    }

    return {handler}
  }
}
</script>

结论：

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

子组件 ——> 父组件 ：emit      setup(props,{emit}){ emit('sendMsg',) }  或 setup(props,ctx) {  ('sendMsg',) }

 

注意：

在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) {
    ("setup---props", props);
  

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

    let send = () => {
      ("send", );
      ("sendMsg", );
    };
    return { state, send };
  },
};