Рубрики
Laravel+Vue3 project Vue компоненты Vue.js

Vue Окно в движении

Вызов родительской функции из дочернего компонента
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>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *