最终页面显示效果为
<div class="open-service" style="color: #0199f0; cursor: pointer;"> hello <p>world</p> </div>
主页面
parent.vue
<template> <div class="hello"> <vue-test :typespan="typespan"></vue-test> </div> </template> <script type="text/jsx"> import vuetest from "./jsx/vuetest"; export default { name: 'helloworld', components:{ vuetest, }, computed:{ typespan(){ return { text:'hello', attrs:{ class:"open-service", style:'color:#0199f0;cursor:pointer' }, } } }, } </script>
子页面child.vue有两种方法
第一种
<script type="text/jsx"> export default { props: { typespan:{ type:object, default:{} } }, created(){ }, methods:{ opencontactservice(){ alert(1) }, }, render(createelement) { return( <div class={this.typespan.attrs.class} style={this.typespan.attrs.style} onclick={this.opencontactservice}> {this.typespan.text} <p >world</p> </div> ) } } </script>
第二种
<script type="text/jsx"> export default { props:{ typespan:{ type:object, default:{} } }, methods:{ opencontactservice(){ alert(1) } }, render(createelement, context) { return createelement( 'div',{ class:this.typespan.attrs.class, style:this.typespan.attrs.style, on:{ click:this.opencontactservice } },[ this.typespan.text, createelement('p','world'), ] ) } } </script>
这是两个最简单的例子
参考链接
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论