在Vue中新增jsx的使用,操作步骤:

1、安装插件
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
   "babel-helper-vue-jsx-merge-props": "^2.0.3",

2、 在.babelrc中配置
plugins: ["transform-vue-jsx"]

3、在webpack.base.conf.js中extensions增加 .jsx;rules中配置
{
    test: /\.(js|jsx)(\?.*)?$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},

4、新建test.jsx文件,在vue文件中调用
Import ‘./test.jsx’
调用: <input-test :zj="btn" />
定义: btn: () => { return <button>测试按钮</button> }

5、test.jsx
render() {
  return (
      <div>
           { this.zj() } 
      </div>
  );
},

posted on 2021-10-13 13:57  羽丫头不乖  阅读(119)  评论(0编辑  收藏  举报