首页 > 代码库 > Vue-Render函数理解示例
Vue-Render函数理解示例
对应文档节点: https://vuefe.cn/v2/guide/render-function.html#Slots
<body> <div id="app"> <div class="parent"> <anchored-heading> </anchored-heading> </div> </div></body><script> Vue.component(‘child‘, { render: function (createElement) { // <div><slot :text="msg"></slot></div> //debugger; return createElement(‘div‘, [ this.$scopedSlots.default({ text: this.msg }) ]) }, // template: ` // <div class="child"> // <slot :text="msg"></slot> // </div> // `, data: function () { return { msg: "Demo" } } }); Vue.component(‘anchored-heading‘, { render(createElement) { return createElement(‘div‘, [ createElement(‘child‘, { // pass scopedSlots in the data object // in the form of { name: props => VNode | Array<VNode> } scopedSlots: { default: function (props) { debugger; return createElement(‘span‘,‘hello-‘+ props.text) } } }) ]) }, // template: ` // <div class="parent"> // <child> // <template scope="props"> // <span>hello {{ props.text }}</span> // </template> // </child> // </div> // ` }) new Vue({ el: "#app" });</script>
Vue-Render函数理解示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。