setup(props,context){}
Первый параметр props:
props — это объект, содержащий все данные, передаваемые родительским компонентом дочернему компоненту.
Используйте реквизиты в дочерних компонентах для получения.
Объект, содержащий все свойства, объявленные и переданные в конфигурации
. То есть: если вы хотите вывести значение, переданное родительским компонентом, дочернему компоненту через реквизит.
Вам необходимо использовать реквизиты для получения конфигурации. То есть props:{......}
Если вы не принимаете конфигурацию через Props, выходное значение будет неопределенным
<template>
<дел>
Родительский компонент</div>
<no-cont :mytitle="msg"
Othertitle="Название других"
@sonclick="sonclick">
</no-cont>
</шаблон>
<скрипт>
импортируйте NoCont из "../comComponents/NoCont.vue"
экспорт по умолчанию {
настраивать () {
пусть сообщение={
title:'Данные из родительского компонента в дочерний компонент'
}
функция sonclick(msss:string){
console.log(мсс)
}
вернуть {msg,sonclick}
},
компоненты:{
НетКонт
}
}
</script> <шаблон>
<div @click="sonHander">
Я — данные в дочернем компоненте</div>
</шаблон>
<скрипт>
импортировать {defineComponent,setup} из 'vue';
экспортировать по умолчанию defineComponent({
имя: 'NoCont',
// Нет принятия // реквизиты:{
// мой заголовок:{
// тип:Объект
// }
// },
настройка (реквизит, контекст) {
console.log('props==>',props.mytitle);//Выходное значение не определено
функция сынХандер(){
context.emit('sonclick','Дочерний компонент передается родительскому компоненту')
}
вернуть {sonHander}
}
});
</скрипт>
Почему значение, выводимое через props.mytitle, не определено?
Потому что мы не использовали реквизиты для получения конфигурации. Это
реквизит:{
мой заголовок:{
тип:Объект
}
}, если мы добавим конфигурацию принятия
Второй параметр: контекст — это объект.
Внутри есть attrs (объект, который получает все атрибуты текущего тега),
но этот атрибут — это все объекты, которые не объявлены для получения в реквизитах.
Если вы используете реквизиты для получения значения и в то же время объявляете значение, которое хотите получить, в реквизитах
: полученное значение не определено
.Примечание.
Для получения значения attrs не требуется никакого объявления в реквизитах. .
Значение, полученное первым параметром props, необходимо объявить в props, чтобы получить
распределение событий генерации (это событие необходимо использовать при передаче его родительскому компоненту)
и слоты slot
<template>
<div @click="sonHander">
Я — данные в дочернем компоненте</div>
</шаблон>
<скрипт>
импортировать {defineComponent,setup} из 'vue';
экспортировать по умолчанию defineComponent({
имя: 'NoCont',
реквизит:{
мой заголовок:{
тип:Объект
}
},
настройка (реквизит, контекст) {
//Вывод {title: значение, переданное родительским компонентом}
console.log('props==>',props.mytitle);
// Вывод заголовков других людей [используйте контекст, чтобы получить значение, нет необходимости использовать реквизиты для принятия]
console.log('context==> ',context.attrs.othertitle);
// Вывод не определен, поскольку для принятия контексту не требуется использовать реквизиты.
console.log('contextmytitle==> ',context.attrs.mytitle);
функция сынХандер(){
context.emit('sonclick','Дочерний компонент передается родительскому компоненту')
}
вернуть {sonHander}
}
});
</скрипт>
3. Дочерний компонент отправляет события родительскому компоненту
<template>.
<div @click="sonHander">
Я — данные в дочернем компоненте</div>
</шаблон>
<скрипт>
импортировать {defineComponent,setup} из 'vue';
экспортировать по умолчанию defineComponent({
имя: 'NoCont',
реквизит:{
мой заголовок:{
тип:Объект
}
},
настройка (реквизит, контекст) {
функция сынХандер(){
context.emit('sonclick','Дочерний компонент передается родительскому компоненту')
}
вернуть {sonHander}
}
});
</script> 4. Оптимизируйте отправку событий.
Мы знаем, что второй параметр context является объектом
и у объекта есть три атрибута: attrs, slots иemit.
При отправке событий можно использовать непосредственно
<template>.
<div @click="sonHander">
Я — данные в дочернем компоненте</div>
</шаблон>
<скрипт>
импортировать {defineComponent,setup} из 'vue';
экспортировать по умолчанию defineComponent({
имя: 'NoCont',
реквизит:{
мой заголовок:{
тип:Объект
}
},
setup(реквизит,{attrs,slots,emit}){
//Используйте излучение непосредственно для функции отправки событий sonHander(){
Emit('sonclick','Дочерний компонент передается родительскому компоненту')
}
вернуть {sonHander}
}
});
</script> 5. Получите значение, переданное родительским компонентом.
Мы будем использовать параметр props, чтобы получить значение
, и attrs, чтобы получить значение
<template>.
<час/>
<h2>Подкомпонент</h2>
<div @click="sonHander">
Я — данные в дочернем компоненте</div>
<h2>Использовал оператор props для получения ==>{{ mytitle }}</h2>
<h2>Используйте параметр attrs, чтобы получить ==>{{ attrs.othertitle }}</h2>
</шаблон>
<скрипт>
импортировать {defineComponent,setup} из 'vue';
экспортировать по умолчанию defineComponent({
имя: 'NoCont',
реквизит:{
мой заголовок:{
тип:Объект
}
},
setup(реквизит,{attrs,slots,emit}){
функция сынХандер(){
Emit('sonclick','Дочерний компонент передается родительскому компоненту')
}
вернуть {sonHander,attrs}
}
});
</скрипт>
Выше приведено подробное объяснение параметров функции настройки в vue3 - реквизиты и контекст. информацию, пожалуйста, обратите внимание на другие статьи на китайском сайте PHP!
