javascript - 如何使用 createElement 渲染函数在 javascript 中编写 vue .sync
问题描述
我正在将我的代码从模板文件更改为渲染函数。现在我有了这个 HTML:
:open.sync="state"
但我不知道如何将其翻译成 JavaScript。如何将其写入createElement
函数?
解决方案
请记住
:open.sync="state"
基本上是语法糖
:open="state" @update:open="state = $event"
那么渲染函数中的等价物将是:
createElement('child', {
props: { // :open="state"
"open": this.state
},
on: { // @update:open="state = $event"
"update:open": ($event) => {
this.state = $event;
}
}
})
演示:
Vue.component('child', {
template: '#child',
props: ['open']
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
render(createElement) {
return (
createElement('div', [
this.message,
createElement('br'),
createElement('child', {
props: {
"open": this.message
},
on: {
"update:open": ($event) => {
this.message = $event;
}
}
})
])
);
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<child :open.sync="message"></child>
</div>
<template id="child">
<div>
<input type="text" :value="open" @input="$emit('update:open', $event.target.value)">
open: {{ open }}
</div>
</template>
推荐阅读
- r - 折旧率为1%的累计金额
- angular - “用户”类型上不存在属性“状态”
- html - 为什么当我更改导航栏高度时,引导导航栏下拉菜单不会将内容移动到下方?
- python - 使用 python paho.mqqt 从 docker 容器通过 ssl 发送数据
- regex - 日期和 3 字母代码的正则表达式
- java - 使用 Firebase 实时数据库的 SearchView 需要很长时间才能获得结果,而且价格昂贵
- php - 如何在 ubuntu 上使用 php 设置 nginx 上游?
- jquery - jquery从删除按钮获取数据ID并以模式显示ID
- java - 如何使用 Java 从 JTable 中的 MySQL 检索 blob 类型的图像?
- geometry - Bing Maps SpatialMath Module Intersection 与具有相同坐标的多个引脚不准确