После начала работы я понял, что синтаксис настройки скрипта Vue3 действительно классный.

внешний интерфейс Vue.js
После начала работы я понял, что синтаксис настройки скрипта Vue3 действительно классный.

«Эта статья участвовала в деятельности Ордена Созыва Хаовэн,Нажмите, чтобы просмотреть: двойные заявки на вход и сервер, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

Я до сих пор помню, что когда я впервые столкнулся с синтаксическим сахаром настройки скрипта, редактор напомнил мне, что это экспериментальное предложение, если вы хотите его использовать, вам нужно исправить версию Vue.

В конце июня предложение было официально доработано.В версии v3.1.3 вы можете продолжать использовать его, но по-прежнему будет подсказка для экспериментального предложения.В v3.2 подсказка будет удалена, а некоторые устаревшие API будут удалены.

Что такое настройка скрипта?

Это новый синтаксический сахар для Vue3, вsetupв функции. Все экспорты модуля ES считаются значениями, доступными для контекста и включенными в возвращаемый объект setup(). По сравнению с предыдущим методом записи синтаксис после использования становится проще.

Он очень прост в использовании, нужно толькоscriptтег плюсsetupключевые слова подойдут. Пример:

<script setup></script>

Авторегистрация компонента

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

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>

Если вам нужно определить атрибуты, похожие на имя, вы можете добавить тег сценария уровня и реализовать его внутри.

Использование API ядра компонента

использование реквизита

пройти черезdefinePropsУкажите текущий тип реквизита, чтобы получить объект реквизита контекста. Пример:

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

  const props = defineProps({
    title: String,
  })
</script>

использовать испускает

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

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

  const emit = defineEmits(['change', 'delete'])
</script>

Получить слоты и атрибуты

в состоянии пройтиuseContextПолучить слоты и атрибуты из контекста. Однако после того, как предложение было официально принято, эта грамматика была упразднена и разделена наuseAttrsиuseSlots. Пример:

// 旧
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

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

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

defineExpose API

При традиционном способе написания мы можем получить доступ к содержимому дочернего компонента через экземпляр ref в родительском компоненте, но в настройке скрипта этот метод использовать нельзя.Настройка эквивалентна замыканию, за исключением внутреннегоtemplateШаблон, никто не может получить доступ к внутренним данным и методам.

Если вам нужно предоставить доступ к данным и методам установки извне, вам нужно использовать API defineExpose. Пример:

<script setup>
	import { defineExpose } from 'vue'
	const a = 1
	const b = 2
	defineExpose({
	    a
	})
</script>

Свойства и методы не нужно возвращать, используйте их напрямую!

Это может быть одним из самых больших удобств: в предыдущем методе написания определение данных и методов необходимо было вернуть в конце, прежде чем их можно будет использовать в шаблонах. В настройке скрипта определенные свойства и методы не нужно возвращать, и их можно использовать напрямую! Пример:

<template>
  <div>
   	<p>My name is {{name}}</p>
  </div>
</template>

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

const name = ref('Sam')
</script>

напиши в конце

Писать не легко, надеюсь получить от вас "лайк". Если статья вам полезна, вы можете выбрать «Избранное». Если в статье есть ошибки или предложения, прошу прокомментировать и исправить, спасибо. ❤️

Добро пожаловать в другие статьи

Категории