Imagine creating a button component with a variable named myVar:
MyButton.vue
<template>
<div>
<slot :name="text">
My Button
</slot>
</div>
</template>
<script>
export default {
name: 'my-button',
data() {
return: {
myVar: 'TEST'
}
}
}
</script>
Now, let's try using this component in another component:
OtherComponent.vue
<my-button>
<div :slot="text">
This is a Button
</div>
</my-button>
How can we access the myVar variable declared in MyButton.vue within the slot definition of the parent OtherComponent.vue? Here's an example:
OtherComponent.vue
<my-button>
<div :slot="text">
This is myVar {{ myVar }} from MyButton.vue
</div>
</my-button>