Props
传递参数
/src/Demo.vue
子组件
<script>
export default {
props: ["msg"],
render() {
return (
<div>
<p>子组件</p>
<p>msg: {this.msg}</p>
</div>
);
}
};
</script>
/src/App.vue
父组件
<script>
import Demo from "./Demo";
export default {
data() {
return {
msg: "default"
};
},
render() {
return (
<div>
<p>父组件</p>
<hr />
<Demo msg={this.msg} />
</div>
);
}
};
</script>
使用JSX
编写之后,你会发现以上对比以前的写法,好像缺少了components
这个配置项。
是的,JSX上你完全不用配置compoents
,直接写上去就行,这是我比较喜欢的
以上简单的参数传递(单向绑定)想必大家都能懂,但如何实现双向绑定呢?
绑定事件
src/App.vue
父组件
<script>
import Demo from "./Demo";
export default {
data() {
return {
msg: "default"
};
},
methods: {
handleOnInput(e) {
// 子组件 input的事件回调
// 实现 改变msg值
this.msg = e.target.value;
}
},
render() {
return (
<div>
<p>父组件</p>
<p>msg: {this.msg}</p>
<hr />
<Demo msg={this.msg} handleChange={this.handleOnInput} />
</div>
);
}
};
</script>
<Demo handleChange={ this.handleOnInput} />
子组件的handleChange
props值与父组件 handleOnInput
绑定
/src/Demo.vue
子组件
<script>
export default {
props: ["msg", "handleOnChange"],
render() {
return (
<div>
<p>子组件</p>
<p>msg: {this.msg}</p>
<!--onInput被触发时,交由父组件事件处理-->
<input value={this.msg} onInput={this.handleChange} />
</div>
);
}
};
</script>
props:["handleOnChange"]
事件必须要配置
<input onInput={this.handleChange} />
当输入框触发onInput
事件时,交由父组件的事件处理
其实JSX
双向绑定就是从原生事件中获取到值之后赋值到对应的变量中,从而达到v-model的效果
传递组件
/src/components/HelloWorld.vue
export default {
render() {
return (
<div>Hello</div>
);
}
}
/src/Demo.vue
export default {
props: ["component"],
render(h) {
return (
<div>
<p>子组件</p>
<!--父组件传入来的组件-->
{ h(this.component) }
</div>
);
}
}
/src/App.vue
import HelloWorld from './components/HelloWorld'
import Demo from './Demo'
export default {
render(h) {
return (
<div>
<p>父组件</p>
<!--向子组件传入组件-->
<Demo component={HelloWorld} />
</div>
);
}
}
通过props
方式,把一个组件传入到子组件中渲染
利用render(h)
的h
实现渲染
组件库事件绑定
当使用组件库开发的时候,事件名称如果有on-*
的,可以使用下面的写法
exrpot default {
render() {
return (
<el-upload {...{
props: {
'on-success': () => {
// 业务逻辑代码...
}
}
}}>上传</el-upload>
)
}
}
v-for 循环
在JSX中,循环得使用array.map()的方式来
<script>
export default {
data() {
return {
data: [
{
title: 1
},
{
title: 2
}
]
};
},
render() {
return (
<div>
<ul>
{
this.data.map(item => {
return <li>{ item.title }</li>
})
}
</ul>
</div>
);
}
};
</script>
v-if 判断
三元运算 方式一
<script>
export default {
data() {
return {
isTrue: true,
};
},
render() {
const msg = this.isTrue ? '你中奖了' : '很遗憾,没中'
return (
<div>
中奖情况:{ msg }
</div>
);
}
};
</script>
三元运算 方式二
<script>
export default {
data() {
return {
isTrue: true,
};
},
render() {
return (
<div>
中奖情况:{ this.isTrue ? '好' : 'no' }
</div>
);
}
};
</script>
样式绑定
style方式
主要在标签上 使用{...{}}
进行绑定
<script>
export default {
data() {
return {
backgroundColor: 'blue',
styleObject: {
backgroundColor: 'red',
fontSize: '20px',
color: '#fff'
}
};
},
render() {
return (
<div>
<span {...{
style: {
backgroundColor: this.backgroundColor
}
}}>我是蓝色背景</span>
<span {...{
style: this.styleObject
}}>我是红色背景</span>
</div>
);
}
};
</script>
class 方式
<script>
export default {
data() {
return {
isBlue: true,
classOjbect: ['red']
};
},
render() {
return (
<div>
<span {...{
class: {
blue: this.isBlue,
}
}}>我是蓝色背景</span>
<span {...{
class: this.classOjbect
}}>我是红色背景</span>
</div>
);
}
};
</script>
<style>
.blue {
background: blue
}
.red {
background: red
}
</style>
Attrs 绑定
常用的动态id
、data-*
赋值
<script>
export default {
data() {
return {
};
},
render() {
return (
<div>
<span {...{
attrs: {
'id': 'app',
'data-id': '1234'
}
}}>我是蓝色背景</span>
</div>
);
}
};
</script>
结果: <span id="app" data-id="1234">我是蓝色背景</span>
Slots 插槽
配置{...{scopedSlots}}
<el-table
data={this.tableData}
stripe
>
<el-table-column
prop='shop_name'
label='店铺名称'
>
</el-table-column>
<el-table-column
prop='shop_status'
label='店铺状态'
{...{
scopedSlots: {
default: props => {
// props.row 当前行的数据
return props.row.shop_status ? <el-tag type='success'>启用</el-tag> : <el-tag type='danger'>禁用</el-tag>
}
}
}}
>
</el-table-column>
<el-table-column
prop='shop_create_time'
label='创建时间'>
</el-table-column>
</el-table>