Как узнать, какой из компонентов был нажат изнутри компонента
Предположим, у меня есть несколько компонентов одного типа, например:
<settings type = "first">1</settings>
<settings type = "second">2</settings>
<settings type = "third">3</settings>
<settings type = "fourth">4</settings>
<settings type = "fifth">5</settings>
Каждый из компонентов является частью «группы», называемой настройками, но каждый из них выполняет несколько разную работу - обычным явлением является то, что это элемент настройки. Теперь, поскольку каждый из них выполняет свою работу, у меня есть в "настройках" определения компонента несколько методов, но каждый метод ведет себя по-разному в зависимости от того, какой компонент был нажат:
Vue.component('settings',
{
template: '<div class = "setting" @click = "selectIt">',
props: ['type'],
methods: {
selectIt() {
switch ( this.type ) {
case 'first':
console.info("first")
break;
case 'second':
console.info("second")
break;
}
}
}
})
Вот и вопросы:
это хороший способ решить такую проблему? Может быть, в каждой настройке должны быть разные компоненты?
как - другим способом - узнать, какой параметр был выбран изнутри компонента?
он работает, но во многих компонентах настроек он становится довольно беспорядочным, мне интересно, есть ли какой-нибудь лучший способ
ну, в html вы можете использовать v-for и передать индекс компонента в качестве опоры, меньше html, и с точки зрения логики я предпочитаю делать что-то вроде case: 1 вместо case 'first'
Я надеялся, что в компоненте есть какая-то внутренняя переменная, которая говорит, какой из компонентов это ..
Есть еще один способ очистки. Просто создайте функциональный объект data () {} и назначьте его событию щелчка, и он будет запускаться только после щелчка по этому компоненту.
Вы можете привести какой-нибудь пример?
Можете ли вы объяснить, какие виды заданий выполняет этот компонент настроек?
Конечно. первый для примеров очищает базу данных от пользователей, второй перезапускает шаг игры и так далее .. они делают совершенно разные задания
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Возможно, приведенное ниже решение будет соответствовать вашим требованиям.
Мое мнение:
добавьте один prop = handlers, затем определите обработчик по умолчанию для каждого типа
если родительский компонент хочет выполнить какую-то особую логику, передайте компоненту
settingsсвой собственный обработчик. В вашем случае кажется, что родительский компонент знает, что нужно делать, а дочерний компонент - нет. Таким образом, родительская передача одного обработчика ребенку будет лучше (ребенка не волнует, что это где, просто нужно делать свою работу).
Vue.config.productionTip = false
Vue.component('settings', {
template: '<div class = "setting" @click = "selectIt">{{type}}</div>',
props: {
'type':{
type: String,
default:'first'
},
'handlers':{
type: Object,
default: ()=>{ return {} }
}
},
data() {
return {
defaultHandlers: { // define your handlers for each type at here
'first': ()=> {
console.info('first')
},
'second': ()=> {
console.info('second')
},
'third': ()=> {
console.info('third')
}
},
mergedHandlers: {}
}
},
methods: {
selectIt() {
if (this.type in this.mergedHandlers) {
this.mergedHandlers[this.type]()
} else { // if handler not found, do something
console.warn('handler not found')
}
}
},
mounted: function(){
// merge customize option with default handlers
Object.assign(this.mergedHandlers,this.defaultHandlers,this.handlers)
}
}
)
app = new Vue({
el: "#app",
data: {
message: "Puss In Boots"
},
methods: {
customHandlerForSecond: function () { // pass customized handler to child component
console.info('parent customized second for ' + this.message)
}
}
})<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
<settings type = "first"></settings>
<settings type = "second" :handlers = "{'second':customHandlerForSecond}"></settings>
<settings type = "third"></settings>
<settings type = "fourth"></settings>
<settings type = "fifth"></settings>
</div>У каждого компонента есть свой идентификатор, если он вам нужен:
Vue.component('my-component', {
template: '#my-component',
data() {
return {
selected: false
}
},
methods: {
selectMe() {
this.selected = !this.selected
console.info(this._uid)
}
}
})
new Vue({
el: '#app',
}).card {
background-color: #F5F5F5;
border-radius: 8px;
margin: 5px;
padding: 5px 10px;
}
.selected {
background-color: #B1B1B1;
}<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
<my-component>1</my-component>
<my-component>2</my-component>
<my-component>3</my-component>
<my-component>4</my-component>
<my-component>5</my-component>
</div>
<template id = "my-component">
<div class = "card" :class = "{'selected': selected }" @click = "selectMe">
<slot />
</div>
</template>+1 это хороший вариант, но _uid - это целочисленные данные, и если оператору нужен какой-то другой формат, ему придется прибегнуть к тому же сценарию переключения.
передача опоры в компонент настроек не подходит для того, что вам нужно?