最终页面显示效果为

<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()
},
},
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()
}
},
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>

这是两个最简单的例子

参考链接 https://cn.vuejs.org/v2/guide/render-function.html

Vue中jsx的最简单用法的更多相关文章

  1. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. java项目中ehcache缓存最简单用法

      java项目中ehcache缓存最简单用法: 1.下载ehcache-core-2.4.3.jar复制到项目的lib目录下 2.新建ehcache.xml文件,放置在项目src目录下的resour ...

  3. vue中mixin的理解与用法

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...

  4. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  5. Vue中Jsx的使用

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  6. 在vue中优雅地实现简单页面逆传值

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...

  7. vue 中 px转vw的用法

    下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...

  8. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

  9. vue中使用vue-i18n 一个简单的国际化操作

    1.安装:npm install vue-i18n --save-dev 2.在main.js文件中引入: import VueI18n from 'vue-i18n' Vue.use(VueI18n ...

随机推荐

  1. cesium计算当前地图范围extent以及近似当前层级zoom

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  2. Java基础语法02-流程控制-if-switch-for-while

    流程控制语句 顺序结构 任何编程语言中最常见的程序结构就是顺序结构.顺序结构就是程序从上到下逐行地执行,中间没有任何判断和跳转. 分支结构 if(条件表达式){ 语句体;} 执行流程 首先判断条件表达 ...

  3. Maven pom.xml文件深度学习

    本文介绍Maven项目构建中,pom.xml文件的生成规则和常用节点的使用方法.pom.xml官方网址:http://maven.apache.org/pom.html pom简介 pom作为项目对象 ...

  4. MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction

    文章导航-readme MySql 更新死锁问题 Deadlock found when trying to get lock; try restarting transaction 1.场景 //t ...

  5. C# -- Quartz.Net入门案例

    1. 入门案例 using Quartz;using Quartz.Impl; public class PrintTime : IJob { public Task Execute(IJobExec ...

  6. (转)LSTM神经网络介绍

    原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...

  7. AssemblyBuilder以及Activator双剑合璧

    AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...

  8. ProjectServer2010升级到ProjectServer2016,Sharepoint2010升级到Sharepoint2016第一章

    之后还原 Project Server 2010 数据库和包含 Project Web App 网站数据的 SharePoint 内容数据库,您可以运行数据和 Project Web App 网站集升 ...

  9. [转]UiPath Installing the Firefox Extension

    本文转自:https://docs.uipath.com/studio/lang-en/v2019/docs/installing-the-firefox-extension From UiPath ...

  10. 地图 SDK 系列教程-在地图上展示指定区域(转载)

    腾讯位置服务地图SDK是一套提供多种地理位置服务的应用程序接口.通过调用该接口,开发者可以在自己的应用中加入地图相关的功能(如地图展示.标注.绘制图形等),轻松访问腾讯地图服务和数据,构建功能丰富.交 ...