Script Setup basic use

This is the 31st day of my participation in the August Text Challenge.More challenges in August

Introduced a new

component

Components can be imported and used without registration

Imported components can be used directly as custom component label names, similar to how they work in JSX.

<template>
  <div>
    <Foo />
  </div>
</template>

<! Add setup property to script tag to use script setup syntax -->
<script setup>
  import Foo from './components/Foo.vue'
</script>
Copy the code

Properties and methods

Properties and methods do not need to be mounted to an object and returned again

<template>
  <div>
    <Foo />
    <h2 @click="increment">{{ count }}</h2>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import Foo from './components/Foo.vue'

  const count = ref(0)
  const increment = () = > count.value++
</script>
Copy the code

The above case will compile to

// The imported modules are pulled to the module level
import { ref } from 'vue'
import Foo from './components/Foo.vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () = > count.value++
    	
    // This is a render function that returns h
    // Since it is compiled into the setup function, you can directly access the top-level defined properties and methods
    return () = > ([
      h(Foo, null.' '),
      h('h2', {
        count,
        onClick: increment
      }, count)
    ])
  }
}
Copy the code

Props and emits

Child components

<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="$emit('increment')">+ 1</button>
    <button @click="decrement">- 1</button>
  </div>
</template>

<script setup>
  // Receives props and returns an object, which can be used in js to get the data passed in
  const props = defineProps({
    count: {
      type: Number.default: 0}})// Declare the event to emit and return an emit function that does the same thing as this.$emit
  const emit = defineEmits(['increment'.'decrement'])

  const decrement = () = > emit('decrement')
</script>
Copy the code

The parent component

<template>
  <div>
    <Foo :count="count" @increment="increment" @decrement="decrement" />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import Foo from './components/Foo.vue'

  const count = ref(0)
  const increment = () = > count.value++
  const decrement = () = > count.value--
</script>
Copy the code

• DefineProps and defineEmits are compiler macros

  Can only be used in

• The options passed to defineProps and defineEmits will be promoted from setup to the module scope.

  Therefore, these options cannot refer to local variables declared in the SETUP scope. Doing so will result in a compilation error.

  However, it can refer to imported bindings because they are also module scoped

export default {
  props: {
    foo: String,},emits: ['change'.'delete'].// Props and emits defined in setup are extracted into the module scope
  setup(props, { emit }) {
  //setup code}},Copy the code

• Props and emits can also be declared using TypeScript syntax by passing a literal type parameter to defineProps or defineEmits.

const props = defineProps<{
  foo: stringbar? :number} > ()const emit = defineEmits<{
  (e: 'change'.id: number) :void
  (e: 'update'.value: string) :void} > ()Copy the code

• Using TypeScript syntax to declare props and emits, there is no way to provide a default value for props.

  To solve this problem, a withDefaults compiler macros is provided.

interfaceProps { msg? :string
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',})Copy the code

Slots and attrs

The use of slots and attrs in

If you really need them, use useSlots and useAttrs helpers respectively.

UseSlots and useAttrs are the actual runtime functions that return values equivalent to setupContext.slots and setupContext.attrs. They can also be used in Composition API functions.

<script setup>
  import { useSlots, useAttrs } from 'vue'

  const slots = useSlots()
  const attrs = useAttrs()
</script>
Copy the code

The top await

The top-level await can be used directly inside

<script setup>
  const post = await fetch('/api/post/1810166').then(res= > res.json())
</script>
Copy the code

Used with regular script

The < Script Setup > syntax provides the ability to express the same functionality as most of the existing Options API Options, with a few exceptions.

• name
• inheritAttrs
• Module export

If you need to declare these options, use a separate plain

<script>
  export default {
    name: 'CustomName'.inheritAttrs: false
  }
</script>

<script setup>
  //script setup logic
</script>
Copy the code