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 ?
Using Vue templates is like using JSX in that they're both created using JavaScript. The main difference is that Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers. What does it mean? JSX functions are never used in the actual HTML file, while Vue templates are.
How to use it. Using the slot is very easy, we should just write the <slot> component (which is a reserved word in Vue. js) inside the child component's template, where we want to receive data. A child component uses slot.
Render Scope Slot content has access to the data scope of the parent component, because it is defined in the parent. For example: template <span>{{ message }}</span> <FancyButton>{{ message }}</FancyButton> Here both {{ message }} interpolations will render the same content.
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With