Vue3 setup-script application

preface

Last time, I wrote some feelings about my first use of VUe3, and also got a lot of guidance from the leaders, among which the most important is the syntax sugar of method setup. In order to find out the syntax sugar, I reconstructed the previous page by myself. After using vue3, it is found that vuE3 can also be as simple as react processing methods and transfer values

Internal variables

Let’s take a look at the internal variable changes, which are pure setup before

    <template>
    <div>
       <div>String: {{infor}}</div>
        <div>Obj: {{obj. Data}}</div>
        <div>Arry: {{arry[0]}}</div>
        <div @click="changeInfor">Change the obj</div>
    </div>
   
</template>

<script>
    import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
    export default {
        setup(){
             const infor = ref('infor')
             const obj  = reactive({
                data:'obj'
            })
            const arry  = reactive([111.222.333])
            const changeInfor  = () = >{
                obj.data = 'changeObj'
            }

            return {
                infor, obj, arry, changeInfor
            }
        }
    }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>
Copy the code

This is the code after changing to syntax sugar

    <template>
    <div>
       <div>String: {{infor}}</div>
        <div>Obj: {{obj. Data}}</div>
        <div>Arry: {{arry[0]}}</div>
        <div @click="changeInfor">Change the obj</div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const infor = ref('infor')
      const obj  = reactive({
          data:'obj'
      })
      const arry  = reactive([111.222.333])
      const changeInfor  = () = >{
          infor.value = '32323'
          obj.data = 'changeObj'
      }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>
Copy the code

Setup does not require a large number of variables and methods to be written in the setup function. It has a high degree of freedom, similar to the react class

Children and parents pass values

There are three main methods involved: defineEmits, defineProps, and defineExpose

/ / the parent component
<template>
    <div>The parent component<children ref="child" @getData="sentData" :data="data"/>
        <div>{{childData | | 'I haven't received value'}}</div>
        <div @click="makeClid">Click to invoke the child component method</div>
    </div>
</template>
<script setup>
  import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
  import children from './components/children.vue'
  const childData = ref(' ')
  const data = ref('Parent component passes value prop')
  const sentData = (data) = >{
    childData.value = data
  }
  const child = ref(null) // Get the subcomponent ref
  const makeClid = () = >{
    child.value.setData('Child component called')}</script>


/ / child component
<template>
    <div>{{fatherData | | 'father component has yet to call me'}}<div @click="getData">Trigger parent component</div>
       <div>fatherProps:{{fatherProps}}</div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const fatherData = ref(' ')
      const fatherProps = ref(' ')
      const props = defineProps({ // The parent component passes the value
          data:String
      })
        fatherProps.value = props.data
      const emit = defineEmits(['getData']) // Accept parent component data
      const getData = () = >{
          emit('getData'.'Value to parent component')  // The method that triggers the parent component
      }

      const setData = (val) = >{ // Parent component call
          fatherData.value = val
      }

      defineExpose({  // Throw a method
            getData,
            setData
        })
</script>
    
Copy the code

1. Child component calls parent component: this is easy to understand, similar to vue2, the parent component is attached to @getData, the child component is called through defineEmits method, the final call is the same as before
2. Parent component calls child component: this is a big difference. The child component needs to define a method and then expose it via defineExpose. The parent component creates ref, where the variable name needs to be created and the ref name of the child component is not available, and finally finds the method by retrieving the value thrown.