我使用这样的渲染函数:
.script.js
:
methods: {
handleClick(data){
console.log(data)
},
render(h, { node, data, store }) {
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<a href="javascript:;"
:attr="data.id" @click="handleClick">Edit{data.id}
</a>
</span>
</span>
);
}
}
但是babel encoutners错误地说:click
有意外的令牌。
.vue
:
<template src="./template.html"></template>
<script src="./script.js"></script>
package.json
:
"vue": "^2.2.6"
"vue-router": "^2.4.0"
"element-ui": "^1.2.8",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"vue-loader": "^11.3.4",
"webpack": "^2.3.1",
webpack
:
{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}
.babelrc
:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
当我运行gulp dist
时,babel会抛出如下错误:
Namespaced tags/attributes are not supported. JSX is not XML.\nFor attributes like xlink:href, use xlinkHref instead.
答案 0 :(得分:1)
正如@Bert Evans所说, 在重新阅读https://github.com/vuejs/babel-plugin-transform-vue-jsx的reademe文档之后,我发现我只是编写了代码而没有理解vue特定的jsx语法的语法。
正如文档所说:
请注意,使用JSX时几乎不支持所有内置Vue指令,唯一的例外是
v-show
,它可以与v-show={value}
语法一起使用。在大多数情况下,有明显的程序化等价物,例如v-if
只是一个三元表达式,而v-for
只是一个array.map()
表达式等。Vue 2.0 JSX中的上述内容相当于:
render (h) {
return (
<div
// 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">
</div>
)
}
所以,我把代码改为
render(h, {node,data,store}) {
const link = {
href: `/#/schema-type/${data.id}`
};
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span>
<a href={link.href} target="_blank">edit</a>
</span>
</span>
);
}
它有效!
答案 1 :(得分:0)
尝试将html编写为字符串:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
看起来你习惯了React,但它写的有点不同。