return (
<div>
<h3>Jsx中的内部组件 { props.data.title }</h3>
{ props.children }
<br />
{ props.scopedSlots.bar() }
</div>
)
}
return (
<div>
<Demo title="test" attrsA="a" domPropsB="b" onClick={this.demo}>
<h3>我是Children</h3>
<template slot="bar">
<p>我是Slot内容</p>
</template>
</Demo>
</div>
)
}
上面的示例最终生成的HTML中会将<template>的内容转换为#document-fragment。
总结
接触Vue时间比较早,但是真正的Vue项目开发经验一年不到,平时比较懒,不怎么去深入学习和研究,所以文章在叙述上没有什么条理性,有些知识点可能并没表达清楚,很多东西还是得多实践去检验。如果有问题欢迎留言共同探讨。
其实早一点实践jsx的写法,对于后面的Vue 3.0出现后可以更快的融入其中,就像React对函数式组件中新增了钩子(Hooks)函数,以后Vue也是主推函数式组件,以后模板语法方式的占比会稍有下降。
文章并没有包含所有Vue中jsx写法的全部知识点,→_→所以叫不完全指南^_^”










