vue如何使用jsx编写函数式组件？
文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。
注意: 如果是手动搭建的项目，需要通过安装插件才可使用JSX。
vue如何使用jsx编写
1.创建Test.jsx文件
export default {
render() {
return (
<div>
<p>vue 使用 jsx</p>
</div>
);
},
};
如此就是最简易版的.jsx文件了
2.插值
在JSX中使用{}来绑定内容
export default {
data() {
return {
val: "这里进行变量存储",
};
},
render() {
const { val } = this;
return (
<div>
<p>vue 使用 jsx</p>
{val}
</div>
);
},
};
建议的写法就是在render中解构出来data里的变量，正文里使用即可。
当然，也可直接调用，方法如下：
<p>{this.val}</p>
3.遍历渲染 、 条件渲染
export default {
data() {
return {
val: "这里进行变量存储",
list: [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "张四",
},
{
id: 3,
name: "张五",
},
{
id: 4,
name: "张六",
},
],
isShow: true,
};
},
render() {
const { val, list, isShow } = this;
return (
<div>
<p>vue 使用 jsx</p>
{/* 插值 */}
{val}
<ul>
{/* 遍历渲染 */}
{list.map((item, index) => {
return <li key={item.id}>{item.name}</li>;
})}
</ul>
{/* 条件渲染 */}
{/* 1. && */}
{isShow && <div>这里是条件渲染</div>}
{/* 2. 三元运算 */}
{isShow ? "条件为真显示内容" : "条件为假显示内容"}
</div>
);
},
};
jsx中没有v-if和v-for。
条件渲染使用&&或者 三元运算
遍历渲染使用 .map
注意： map的返回值需要是一个标签，且为唯一根标签形式的。遍历出的标签，建议添加key
4. jsx样式添加
推荐使用scss
使用如下:
1.新建styld.scss文件
可根据需求自行编写
.container{
border: 1px dotted red;
color: red;
}
ul{
li{
line-height: 44px;
border-bottom: 1px dotted gold;
}
}
2.在当前.jsx内引入使用
import './styled.scss' // 引入外部样式
export default {
data() {
return {
val: "这里进行变量存储",
list: [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "张四",
},
{
id: 3,
name: "张五",
},
{
id: 4,
name: "张六",
},
],
isShow: true,
};
},
render() {
const { val, list, isShow } = this;
return (
// 添加class 此处与react不一样，不需使用className，因为在react中class为关键字
<div class='container'>
<p>vue 使用 jsx</p>
{/* 插值 */}
{val}
<ul>
{/* 遍历渲染 */}
{list.map((item, index) => {
return <li key={item.id}>{item.name}</li>;
})}
</ul>
{/* 条件渲染 */}
{/* 1. && */}
{isShow && <div>这里是条件渲染</div>}
{/* 2. 三元运算 */}
{isShow ? "条件为真显示内容" : "条件为假显示内容"}
</div>
);
},
};
5. 使用自定义组件
当组件仅需要展示，而不需要进行其他操作时，不用维护状态，可使用 functional进行标识，性能会好很多
1.创建组件
Child1.jsx
// 仅进行展示
export default {
functional: true,
render(h, content) {
console.log("content", content);
return <div>这里是子组件，展示的内容为：{content.props.val}</div>;
},
};
注意： 函数式组件是没有this的。所有的内容都在render的第二个参数里
Child2.jsx
// 调用父组件方法，修改child1显示的内容
export default {
functional: true,
render(h, content) {
return (
<div>
<p>这里是子组件2</p>
{/* 绑定事件 需要加on */}
{/* 调用父组件方法 也是在 content里进行调用，因为没有this*/}
<button onClick={() => content.listeners.parent()}>
click me,调用父组件方法
</button>
</div>
);
},
};
2.父组件使用
import "./styled.scss";
import Child1 from "./Child1";
import Child2 from "./Child2";
export default {
components: ["Child1", "Child2"],
data() {
return {
val: "这里进行变量存储",
list: [
{
id: 1,
name: "张三",
},
{
id: 2,
name: "张四",
},
{
id: 3,
name: "张五",
},
{
id: 4,
name: "张六",
},
],
isShow: true,
childMsg: "父组件传递给子组件的内容",
};
},
methods: {
// 定一个一个方法，修改数据
changeMsg() {
this.childMsg = "点击了child2，修改了child1的内容";
},
},
render() {
const { val, list, isShow, childMsg } = this;
return (
// 添加class 此处与react不一样，不需使用className
<div class="container">
<p>vue 使用 jsx</p>
{/* 插值 */}
{val}
<ul>
{/* 遍历渲染 */}
{list.map((item, index) => {
return <li key={item.id}>{item.name}</li>;
})}
</ul>
{/* 条件渲染 */}
{/* 1. && */}
{isShow && <div>这里是条件渲染</div>}
{/* 2. 三元运算 */}
{isShow ? "条件为真显示内容" : "条件为假显示内容"}
{/* 调用子组件 */}
{/* child1 仅仅展示数据 */}
<Child1 val={childMsg} />
{/* Child2 调用父组件方法 */}
{/* 注意： 此处使用on绑定方法parent，子组件只需调用parent方法 */}
<Child2 onparent={() => this.changeMsg()} />
</div>
);
},
};
jsx组件内content的内容有很多，简单说一哈:
children # VNode数组，类似于React的children
data # 绑定的属性
attrs # Attribute
domProps # DOM property
on # 事件
injections # 注入的对象
listeners: # 绑定的事件类型
click # 点击事件
...
parent # 父组件
props # 属性
scopedSlots # 对象，作用域插槽，使用中发现作用域插槽也挂在这个下面
slots # 函数，插槽
如此就可进行业务代码简单的编写了。。。