Вызов родительской функции из дочернего компонента
slideToggle
компонент контейнер содержит скрываемый контент
resources\js\components\win\WinData.vue
<template>
<div class="data">
data
</div>
</template>
<script>
export default{
methods:{
slideToggle(){$(this.$el).slideToggle('slow')}
},
}
</script>
<style scoped>
.data{
overflow:scroll;
display:block;
height:300px;
width: 300px;
background: white;
min-width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
img выполняет простую функцию slideToggle которая вызывает родительскую функцию slideToggle через emit соединением
resources\js\components\win\WinHeader.vue
<template>
<div title="header">
<div class="css-div"><img src="img\cub.png" class="css-img" @click="slideToggle"></div>
</div>
</template>
<script>
export default{
methods:{
slideToggle(){this.$emit('slideToggle')}
},
}
</script>
<style scoped>
.css-div{
display:inline-block;
vertical-align:top;
}
.css-img{
height:25px;
display:inline-block;
vertical-align:bottom;
}
</style>
главный компонент
регистрируется глобально в resources\js\app.js или локально, где используется только один раз
resources\js\components\win\Win.vue
в родительском компоненте делаем связи
- в компоненте win-header связываем
дочернюю emit функцию slideToggle компонента WinHeader c родительской простой функцией slideToggle компонента Win, которая вызывает простую функцию slideToggle компонента WinData - компоненту win-data добавить атрибут ref, который даёт доступ к компоненту в родительской простой функции slideToggle через this.$refs
<template>
<div class="win-move">
<win-header @slideToggle="slideToggle"/>
<win-data ref="data"/>
</div>
</template>
<script>
import WinHeader from './WinHeader.vue';
import WinData from './WinData.vue';
export default{
components: {
'win-header':WinHeader,
'win-data':WinData,
},
methods: {
slideToggle() {this.$refs.data.slideToggle()}
},
mounted(){$(this.$el).draggable()},
}
</script>
<style scoped>
.win-move{
position:absolute;
background: lemonchiffon;
border:4px double black;
}
</style>