настроить синтаксический сахар в Vue3.2 (настоятельно рекомендуется)

Vue.js
настроить синтаксический сахар в Vue3.2 (настоятельно рекомендуется)

Это пятый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов ноябрьского обновления

Преамбула

Как фронтенд-программист, говорить о Vue 3 определенно не является чем-то необычным, так как в настоящее время это один из самых популярных интерфейсных фреймворков, многие люди используют его в качестве фреймворка начального уровня.

Но даже несмотря на то, что Vue 3 уже давно используется, некоторые люди будут жаловатьсяVue 3 имеет слишком много знаний и слишком сложен, а обновление происходит слишком быстро.. Нет, недавно Vue 3 доработал новую технологию:script-setup синтаксический сахар.

1. Что такое синтаксический сахар настройки

  • При первом воздействии переменные должны Vue3.0return публично заявить,templateможно использовать в

Теперь нам нужно только добавить setup в тег script, компонент нужно только ввести без регистрации, свойства и методы не нужно возвращать, и не нужно писать функции настройки или экспортировать значения по умолчанию, даже пользовательские инструкции могут быть автоматически получается в нашем шаблоне. .

<template>
  <my-component :num="num" @click="addNum" />
</template>

<script setup>
  import { ref } from 'vue';
  import MyComponent from './MyComponent .vue';

  // 像在平常的setup中一样的写,但是不需要返回任何变量
  const num= ref(0)       //在此处定义的 num 可以直接使用
  const addNum= () => {   //函数也可以直接引用,不用在return中返回
    num.value++
  }
</script>

//必须使用驼峰命名

2. Используйте компонент установки для автоматической регистрации

В настройке скрипта импортированные компоненты можно использовать напрямую, не нужно регистрироваться через компоненты, а также нельзя указывать имя текущего компонента, он автоматически использует имя файла как основное, то есть не нужно писать атрибут имени. Пример:

<template>
    <zi-hello></zi-hello>
</template>

<script setup>
  import ziHello from './ziHello'
</script>

3. Добавьте API после использования настройки

Поскольку нет функции настройки, как получить реквизит и излучать?

STRIP SCRIPT SYNTACTIC SUCHER обеспечивает новую API для нас использовать

3.1 defineProps

Используется для получения реквизитов от родительского компонента. Пример:

код родительского компонента

<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello :name="name"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  import {ref} from 'vue'
  let name = ref('赵小磊========')
</script>

код подкомпонента

<template>
  <div>
    我是子组件{{name}} // 赵小磊========
  </div>
</template>

<script setup>
  import {defineProps} from 'vue'

  defineProps({
   name:{
     type:String,
     default:'我是默认值'
   }
 })
</script>

3.2 defineEmits

Дочерние компоненты передают события родительским компонентам. Пример:

Подсборка

<template>
  <div>
    我是子组件{{name}}
    <button @click="ziupdata">按钮</button>
  </div>
</template>

<script setup>
  import {defineEmits} from 'vue'

  //自定义函数，父组件可以触发
  const em=defineEmits(['updata'])
  const ziupdata=()=>{
    em("updata",'我是子组件的值')
  }

</script>

родительский компонент

<template>
  <div class="die">
    <h3>我是父组件</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  
  const updata = (data) => {
    console.log(data); //我是子组件的值
  }
</script>

3.3 defineExpose

组件暴露出自己的属性，在父组件中可以拿到。 Пример:

Подсборка

<template>
  <div>
    我是子组件
  </div>
</template>

<script setup>
  import {defineExpose,reactive,ref} from 'vue'
  let ziage=ref(18)
  let ziname=reactive({
    name:'赵小磊'
  })
  //暴露出去的变量
  defineExpose({
    ziage,
    ziname
  })
</script>

родительский компонент

<template>
  <div class="die">
    <h3 @click="isclick">我是父组件</h3>
    <zi-hello ref="zihello"></zi-hello>
  </div>
</template>

<script setup>
  import ziHello from './ziHello'
  import {ref} from 'vue'
  const zihello = ref()

  const isclick = () => {
    console.log('接收ref暴漏出来的值',zihello.value.ziage)
    console.log('接收reactive暴漏出来的值',zihello.value.ziname.name)
  }
</script>

Результат, полученный родительским компонентом

暴露结果.png

Суммировать:

Вышеупомянутое понимание и понимание синтаксического сахара настройки, недостатки резюме и неправильное понимание.Добро пожаловать, чтобы указать на обсуждение.

Категории