vue babel-loader SyntaxError: Unexpected token on ":click" 语法

Posted 2023-02-23

【中文标题】vue babel-loader SyntaxError: Unexpected token on ":click" 语法

【英文标题】：vue babel-loader SyntaxError: Unexpected token on ":click" syntax

【发布时间】：2017-09-24 01:03:10

【问题描述】：

我使用这样的渲染函数：

.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">Editdata.id
                        </a>
                    </span>
                </span>
            );
        

但是 babel encoutners 错误说 :click 有 Unexpected 令牌。

.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.

【问题讨论】：

你的意思是@click？

@thanksd 我编辑了它。

那不是 JSX。你不能混合 JSX 和 Vue 语法；这是一个或另一个。它应该类似于onClick=this.handleClick。

【参考方案1】：

正如@Bert Evans 建议的那样， 重读https://github.com/vuejs/babel-plugin-transform-vue-jsx的reademe docs后，我发现我只是写了代码，没有理解vue-specific 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>
    );

它有效！

【参考方案2】：

尝试将你的 html 写成字符串：

Vue.component('my-component', 
    template: '<div>A custom component!</div>'
);

看起来你习惯了 React，但它写的有点不同。