This is the code:
<q-avatar #click="redirectToHome" rounded color="green">
<img ... />
</q-avatar>
<q-toolbar-title #click="redirectToHome">
App
</q-toolbar-title>
what I want is a dummy component <></> where I can wrap these two components and use event handlers only once. Something like this:
<what-to-put-here #click="redirectToHome">
<q-avatar rounded color="green">
<img ... />
</q-avatar>
<q-toolbar-title>
App
</q-toolbar-title>
</what-to-put-here>
Is this possible in Vue 3 ?
[EDIT]
Obviously using a <div></div> will mess up the styles
You can create a wrapper component which renders the slots and binds handlers on them.
Something like this
// WrapperComponent
setup(props, { slots }) {
return () => {
if (slots.default)
return slots.default({ prop: someProp })?.map((node, i) => h(node, { ref: `target-${i}`, ...attrs, onClick: $event => console.log('clicked', $event.target)}));
};
}
Related
I am trying to pass nested slots into my mounted component and I can;'t figure out the syntax, couldn't find anything in docs.
What I am trying to do is to add html element into drop-down slot
This is my test what I've tried but it looks to be wrong.
it('should render drop down', async () => {
const wrapper = mount(MyComponent, {
slots: {
utilities: `
<template slot="drop-down">
<input placeholder="Search bar" class="header-bar-mobile-drop-down-utility__example">
</template>
`
}
});
expect(wrapper.find(".header-bar-mobile-drop-down-utility").exists()).to.equal(true)
});
I have a form that contains a selector reusable component like this
<template>
<div class="channelDetail" data-test="channelDetail">
<div class="row">
<BaseTypography class="label">{{ t('channel.detail.service') }}</BaseTypography>
<BaseSelector
v-model="serviceId"
data-test="serviceInput"
class="content"
:option="servicePicker.data?.data"
:class="serviceIdErrorMessage && 'input-error'"
/>
</div>
<div class="row">
<BaseTypography class="label">{{ t('channel.detail.title') }}</BaseTypography>
<BaseInput v-model="title" data-test="titleInput" class="content" :class="titleErrorMessage && 'input-error'" />
</div>
</div>
</template>
I'm going to test this form by using vue-test-utils and vitest.
I need to set option props from the script to the selector.
In my thought, this should be worked but not
it('test', async () => {
const wrapper=mount(MyForm,{})
wrapper.findComponent(BaseSelector).setProps({option:[...some options]})
---or
wrapper.find('[data-test="serviceInput"]').setProps({option:[...some options]})
---or ???
});
Could anyone help me to set the props into components in the mounted wrapper component?
The answer is that you should not do that. Because BaseSelector should have it's own tests in which you should test behavior changes through the setProps.
But if you can't do this for some reason, here what you can do:
Check the props passed to BaseSelector. They always depend on some reactive data (props, data, or computed)
Change those data in MyForm instead.
For example
// MyForm.vue
data() {
return {
servicePicker: {data: null}
}
}
// test.js
wrapper = mount(MyForm)
wrapper.setData({servicePicker: {data: [...some data]})
expect(wrapper.findComponent(BaseSelector)).toDoSomething()
But I suggest you to cover the behavior of BaseSelector in separate test by changing it's props or data. And then in the MyForm's test you should just check the passed props to BaseSelector
expect(wrapper.findComponent(BaseSelector).props('options')).toEqual(expected)
I'm trying to make a functional component that renders a component or another depending on a prop.
One of the output has to be a <v-select> component, and I want to pass it down all its slots / props, like if we called it directly.
<custom-component :loading="loading">
<template #loading>
<span>Loading...</span>
</template>
</custom-component>
<!-- Should renders like this (sometimes) -->
<v-select :loading="loading">
<template #loading>
<span>Loading...</span>
</template>
</v-select>
But I can't find a way to include the slots given to my functional component to the I'm rendering without adding a wrapper around them:
render (h: CreateElement, context: RenderContext) {
// Removed some logic here for clarity
return h(
'v-select',
{
props: context.props,
attrs: context.data.attrs,
on: context.listeners,
},
[
// I use the `slot` option to tell in which slot I want to render this.
// But it forces me to add a div wrapper...
h('div', { slot: 'loading' }, context.slots()['loading'])
],
)
}
I can't use the scopedSlots option since this slot (for example) has no slot props, so the function is never called.
return h(
'v-select',
{
props: context.props,
attrs: context.data.attrs,
on: context.listeners,
scopedSlots: {
loading(props) {
// Never called because no props it passed to that slot
return context.slots()['loading']
}
}
},
Is there any way to pass down the slots to the component i'm rendering without adding them a wrapper element?
I found out it's totally valid to use the createElement function to render a <template> tag, the same used to determine which slot we are on.
So using it like this fixes my problem:
render (h: CreateElement, context: RenderContext) {
// Removed some logic here for clarity
return h(
'v-select',
{
props: context.props,
attrs: context.data.attrs,
on: context.listeners,
},
[
// I use the `slot` option to tell in which slot I want to render this.
// <template> vue pseudo element that won't be actually rendered in the end.
h('template', { slot: 'loading' }, context.slots()['loading'])
],
)
}
In Vue 3 it's a way easier.
Check the docs Renderless Components (or playground)
An example from the docs:
App.vue
<script setup>
import MouseTracker from './MouseTracker.vue'
</script>
<template>
<MouseTracker v-slot="{ x, y }">
Mouse is at: {{ x }}, {{ y }}
</MouseTracker>
</template>
MouseTracker.vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const x = ref(0)
const y = ref(0)
const update = e => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>
<template>
<slot :x="x" :y="y"/>
</template>
Just to mention, you can easily override CSS of the component in the slot as well.
I'm trying to transform a Vue component I've made in a render function. Problem is I can't find a way to access the named slot props, like in the example:
<template #slot-name="slotProps">
<MyComponent v-bind="slotProps" />
</template>
There's a way to transform this code in a render function ?
To pass a scoped slot, use the scopedSlots property of the 2nd argument to h() (createElement()) in the form of { name: props => VNode | Array<VNode> }.
For example, assuming your template is:
<MySlotConsumer>
<template #mySlot="slotProps">
<MyComponent v-bind="slotProps" />
</template>
</MySlotConsumer>
The equivalent render function would be:
export default {
render(h) {
return h(MySlotConsumer, {
scopedSlots: {
mySlot: slotProps => h(MyComponent, { props: slotProps })
}
})
}
}
demo
I define a simple child component(testSlot.vue) like this:
<template>
<section>
<div>this is title</div>
<slot text="hello from child slot"></slot>
</section>
</template>
<script>
export default {}
</script>
and we can use it in html template like this
<test-slot>
<template scope="props">
<div> {{props.text}}</div>
<div> this is real body</div>
</template>
</test-slot>
but how can I use it in jsx ?
After read the doc three times , I can answer the question myself now O(∩_∩)O .
<test-slot scopedSlots={
{
default: function (props) {
return [<div>{props.text}</div>,<div>this is real body</div>]
}
}}>
</test-slot>
the slot name is default.
So. we can access the scope in the scopedSlots.default ( = vm.$scopedSlots.default)
the callback argument 'props' is the holder of props.
and the return value is vNode you cteated with scope which exposed by child component.
I realize the jsx is just a syntactic sugar of render function ,it still use createElement function to create vNode tree.
now in babel-plugin-transform-vue-jsx 3.5, you need write in this way:
<el-table-column
{ ...{
scopedSlots: {
default: scope => {
return (
<div class='action-list'>
</div>
)
}
}
} }>
</el-table-column>