jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX?
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到
我为什么要在vue中用JSX?
想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧.
ps:vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.
使用template
// item.vue
export default {
name: "item",
props:{
id:{
type:Number,
default:1
}
}
}
item组件中就是接收父组件传过来的id值来显示不同的h标签,v-if可以说用到了"极致",而且写了很多个冗余的slot
使用render函数和jsx
// item.vue
export default {
name: "item",
props:{
id:{
type:Number,
default:1
}
},
render(){
const hText=`
${this.$slots.default[0].text}
`
return
}
}
再加上父组件来控制props的值。父组件不做对比还用传统的template格式,
// list.vue
Hello World
下一个
import Title from './item'
export default {
name: "list",
data() {
return {
id:1
}
},
components: {
"h-title":Title
},
methods:{
next(){
++this.id
}
}
}
运行后页面就渲染出了h1 or h2 or h3标签,同时slot也只有一个,点击切换props的值,也会显示不同的h标签。第二种写法虽然不是很直接,但是省去了很多冗余代码,页面一下清爽了很多。
没了v-if,v-for,v-model怎么办?
不要着急,这些指令只是黑魔法,用js很容易实现。
v-if
render(){
return (
{this.show?'你帅':'你丑'}
)
}
写三元表达式只能写简单的,那么复杂的还得用if/else
render(){
let ifText
if(this.show){
ifText=
你帅
}else{
ifText=
你丑
}
return (
{ifText}
)
}
v-for
data(){
return{
show:false,
list:[1,2,3,4]
}
},
render(){
return (
{this.list.map((v)=>{
return
{v}
})}
)
}
在jsx中{}中间是没办法写if/for语句的只能写表达式,所以就用map来当循环,用三元表达式来当判断了
v-model
最近在帮公司面试招人发现v-model很多人都不知道语法糖是什么?然后有些人说我可以用原生js实现,但是他们竟然不知道在vue中怎么实现,好吧,两个点:传值和监听事件改变值。
export default {
name: "item",
data(){
return{
show:false,
list:[1,2,3,4],
text:'',
}
},
methods:{
input(e){
this.text=e.target.value
}
},
render(){
return (
{this.text}
)
}
}
怎么用自定义组件?
很简单,只需要导入进来,不用再在components属性声明了,直接写在jsx中比如
import HelloWolrd from './HelloWorld'
export default {
name: "item",
render(){
return (
)
}
}
事件,class,style,ref等等怎么绑定?
来看下面的写法
render (h) {
return (
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
)
}
上面有个地方需要注意,当给自定义组件绑定事件时用nativeOnClick,而模板格式是用
@click.native,另外当用到给函数式组件绑定事件时就有点小坑了下面说。
JSX中的函数式组件
函数式组件无状态,无this实例,下面是vue文档中提到的一段话:
因为函数式组件只是一个函数,所以渲染开销也低很多。然而,对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。
我个人理解因为没了状态(data),少了很多响应式的处理,还有生命周期等过程会提高速度和减少内存占用吧?
函数式组件也可以在模板格式中用只需要这样
那jsx中的函数式组件呢?也很简单只需增加配置functional: true就可以了
那函数式组件没有了this 实例怎么绑定事件怎么获取props呢?
组件需要的一切都是通过上下文传递,包括:
props : 提供所有 prop 的对象
children: VNode 子节点的数组
slots: 返回所有插槽的对象的函数
data:传递给组件的数据对象,并将这个组件作为第二个参数传入 createElement
上面我只列举了部分属性,这些是非函数式组件的东西,对于函数式组件
vue 增加了context对象,需要作为render(h,context) 第二个参数传入,this.$slots.default更新为context.children props原本是直接挂在this上的,现在变为context.props挂在了context.props上。this.data变为了context.data
需要注意的是对于函数式组件,没有被定义为prop的特性不会自动添加到组件的根元素上,意思就是需要我们手动添加到组件根元素了,看个例子吧
//父组件
...省略无关代码
render(){
return (
)
}
//Item.vue组件
export default {
functional:true,
name: "item",
render(h,context){
return (
{context.props.data}
)
}
}
上面代码期待的是.large类名传入到了Item的根元素上,但是其实没有。我们需要增加点东西
// Item.vue
export default {
functional:true,
name: "item",
render(h,context){
return (
{context.props.data}
)
}
}
注意到,通过展开运算符把所有的属性添加到了根元素上,这个context.data就是你在父组件给子组件增加的属性,他会跟你在子元素根元素的属性智能合并,现在.large类名就传进来了。这个很有用,当你在父组件给子组件绑定事件时就需要这个了。下面说一个关于绑定事件的小坑
向 createElement 通过传入 context.data 作为第二个参数,我们就把 my-functional-button 上面所有的特性和事件监听器都传递下去了。事实上这是非常透明的,那些事件甚至并不要求 .native 修饰符
上面是vue官网的一段话,然而我看了一遍就忽略了一句很重要的话,就是最后一句,他说不需要.native修饰符了?好先看代码
// 父组件
methods:{
show(){
alert('你好')
}
},
render(){
return (
)
}
上面代码乍一看没毛病,自定义组件用onNativeClick嘛,结果就是不会弹窗。唉,最后读了几遍刚才vue文档中的解释,才发现原来函数式组件不需要.native修饰符,对于template格式肯定一下就反应过来了,但是jsx的话,好吧,把上面的onNativeClick重新改为onClick就好了。
现有项目哪些功能可以用jsx代替呢?
这个其实跟最开始我例举的例子很像。我在项目中用它来干掉了满屏的v-if/v-else
由于我的业务是pad上的,需求是一套试卷有几十道题目,要求一屏只显示一道题目,点击下一题显示下一个题,思路也比较简单:
用一个num变量表示当前正在展示的题目索引
每次点击下一题按钮时num++
用v-if来判断 num===1,num===2这样来决定展示哪个。
这一写,模板里面好多啊,由于我们的题目每道题的模板可能都不一样,所以没办法循环,只能手写全部。之前考虑过用动态组件来切换,但是放弃了,因为没有if直观啊。
下面看怎么用jsx优化一下
//父组件
export default {
name: "list",
data() {
return {
data:'我是函数式组件',
id:1,
tests:{
1:
,
2:
,
3:
第三道题
}
}
},
methods:{
next(){
++this.id
}
},
render(){
return (
下一题
)
}
}
上面每道题目的结构都不一致
//子组件,只接受数据展示,用函数式组件
export default {
functional:true,
name: "item",
render(h,context){
return (
{context.props.data}
)
}
}
上面没有用任何if/else判断就完成了功能,这里用jsx我觉得比较合适,不知道各位大佬有什么其他思路?
最后
总结一下吧,我们平时开发还是多用temlate因为直观简洁,各种指令用着很方便,等你觉得用template写出的代码看着很冗余,或者想自己控制渲染逻辑比如循环,判断等等时可以考虑用JSX。另外推荐大家多用函数式组件提高性能。
第一次写文章,希望各位花时间看了的大佬觉得哪个说的不太严谨还需多多包涵,提出意见我都接受。
参考资料
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法相关推荐
- jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭 转发链接:https://zhuanlan.zhihu.com/p/102668383 前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
- jsx怎么往js里传参数_给js文件传参数(详解)
一.利用全局变量 这是最简单的一种方式,比如Google Adsense: 缺点是引入了全局变量.其中引入文件的方式还有两个变体: // 变体1:用document.write输出 document. ...
- jsx怎么往js里传参数_JSX语法使用详解——终极版
一.基础 1.JSX是什么 JSX是一种像下面这样的语法: const element = Hello, world! ; 它是一种JavaScript语法扩展,在React中可以方便地用来描述UI. ...
- jsx怎么往js里传参数_Angular、React 当前,Vue.js 优劣几何?
在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高.2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注.那么,Vue.js 是适合你的框架吗? 以下为译 ...
- axios 跨域传参_在Vue中如何使用axios跨域访问数据
vue.js学习之 跨域请求***与axios传参 一:跨域请求*** 1:打开config/index.jsmodule.exports{ dev: { } } 在这里面找到proxyTable{} ...
- jsf 传参数_在JSF 2中对定制验证器进行参数化
jsf 传参数 在JSF 2中编写自定义验证器并不是一项复杂的任务. 您实现Validator接口,添加@FacesValidator批注,并在faces-config.xml中插入validator ...
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- 聊聊Vue中的JSX
JSX简介 JSX是一种Javascript的语法扩展,即具备了Javascript的全部功能,同时又兼具html的语义化和直观性.它可以让我们在JS中写模板语法: const el = <di ...
- 在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
最新文章
- Windows下编译Chrome V8
- jupyter安装与初探
- Daily Scrum4 11.6
- python制作计算机程序_用 Python 开发实用程序 – 计算器
- 窗口限制文件上传格式
- contos的apt-get安装
- python和java的区别-java和python的区别
- CentOS 如何修改mysql 用户root的密码
- Linux中级之负载均衡(lvs,nginx,haproxy)、中间件
- 如何测试GPS的RAIM功能-->如何使用GSS7000测试RAIM
- 流氓又见流氓!-有感雅虎中国通过公证部门 证明雅虎助手非恶意软件
- 华为联手沃达丰建立NB-IoT开放实验室
- colorAccent,colorPrimary,colorPrimaryDark……来这里你就明白了
- 大写字母转换为小写字母
- python安装gensim_安装gensim
- Python和R的GUI图形化编程与用户界面
- 墙面有几种装修方法_装修时墙面处理都有哪几种方式?
- 计算机历史和未来课程,计算机课程作业,计算机与汽车结合的历史与未来ppt概要.ppt...
- python爬取云顶之弈官网排名数据
- 在vue3中使用jsx语法