Компонент Tabs регистрируется глобально не явно и выводит универсальные вкладки через props
Рубрики
фреймворки на JavaScript
Компонент Tabs регистрируется глобально не явно и выводит универсальные вкладки через props
Структура секции Script в компоненте содержит логику компонента, которую можно вынести в Mixins для переиспользования в других компонентах.
<script>
export default{
name: 'full-name',//имя компонента для секции template
components:{...},
data:()=>{return object},
props:{...},
methods:{...},
hook(){...},
}
</script>
Первый Vue3 компонент в Laravel проекте
Регистрация компонента может проводится двумя видами во Vue.js
Vue.component
Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.
В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript
export default{
name:MyDirective,
//el - текущий элемент к которому привязана директива
//хук - например Mounted
Хук(el, binding){
//binding.value значение передаваемое от директивы
}
}
import VMyDirective from './directives/VMyDirective';
export defualt[
VMyDirective,
]
import App from './App';
//import VMyDirective from './directives/VMyDirective';
import directive from './directives';
const app = createApp(App);
//add.directive('mydirective',VMyDirective);
directives.forEach(directive=>{
app.directive(directive.name,directive);
})
add.mount('#app');
<template>
//binding- функция,объект и т.д.
<el v-mydirective="binding"></el>
</template>
export default {
props:{prop1},
data(){},
methods:{},
computed:{},
watch:{},
...
}
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
mixins:[ИмяМексина],
}
</script>