关于Vue的一些写法及问题记录

∮ v-model的数据双向绑定

<!--父组件代码============================================================-->
<template>
	<vs-radio v-model="radio" label="0"></vs-radio>
    <vs-radio v-model="radio" label="1"></vs-radio>
    {{radio}} <!--点击组件时会看到radio随着点击发生变化-->
</template>
<script>
	export default {
	    name: "Index",
	    data () {
			return { radio: "1" }
		}
	}
</script>
<!--子组件代码============================================================-->
<template>
	<label class="vs-radio-content" @click="selectedRadio">{{label}}</label>
</template>
<script>
    export default {
        name: "vs-radio",
        model: {
            event: 'change'
        },
        props: {
            value: '',
            label: {
                type: String
            }
        },
        methods: {
            selectedRadio () {
                this.$emit('change', this.label)
            }
        }
    }
</script>

∮ 获取组件使用时 v-model 绑定的对象名称

this.$vnode.data.model.expression
例如：

<!--这是使用组件时的代码======================================================-->
<template>
	<vs-radio v-model="radio" value="0"></vs-radio>
</template>
<script>
	export default {
	    name: "Index",
	    data () {
			return { radio: "1" }
		}
	}
</script>
<!--下面是组件的js代码========================================================-->
<script>
	export default {
	    name: "vs-radio",
	    created () {
	        console.log(this.$vnode.data.model.expression) // 获取到绑定的 v-model 对象key
	        console.log(this.$vnode.data.model.value) // 获取到 v-model 的值
	    },
	}
</script>
<!--这里输出是 radio  1-->

∮ 初始化data值

初始化 data 中的 footData 数据

Object.assign(this.$data.footData, this.$options.data().footData);

初始化全部的 data数据

Object.assign(this.$data, this.$options.data());

∮ 异常处理

1.did you register the component correctly? For recursive components, make sure to provide the “name” option

异常信息如下：
did you register the component correctly? For recursive components, make sure to provide the “name” option.

原因1：由于组件递归导致，例如A引入B，B引入C，C引入A，造成递归循环引入，该引用全部是以局部组件方式引入，可能会发生该异常。
解决办法：将其中一个组件使用Vue.Component()注册为全局组件，使组件引入不再形成递归。

2.[Vue warn]: Failed to mount component: template or render function not defined.

该问题可能出现的场景：

• A：动态路由导入时出现

menu.component = import(`./layouts/View.vue`);

通过打印日志可以看出，这时我们导入的组件数据结构为一个 Promise，这明显是不正确的

那么我们将该处代码改为如下内容：再次打印结果，发现结果为一个组件，问题解决

menu.component = require(`./layouts/View.vue`).default;

3.Support for the experimental syntax ‘jsx’ isn’t currently enabled

Syntax Error:   SyntaxError: E:\Jingchao\BambooShadow\bambooShadowFront\src\components\UserForm\js\render.js: Support for the experimental syntax 'jsx' isn't currently enabled (38:14):
    36 |   'el-input': {
    37 |     prepend(h, conf, key) {
  > 38 |       return <template slot="prepend">{conf.__slot__[key]}</template>;
       |              ^
    39 |     },
    40 |     append(h, conf, key) {
    41 |       return <template slot="append">{conf.__slot__[key]}</template>;
  Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
  If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

当在vue项目中编写了如下语法时，出现该错误

 function prepend(h, conf, key) {
    return <template slot="prepend">{conf.__slot__[key]}</template>;
 },

解决办法：
添加如下依赖

"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/preset-react": "^7.0.0",

并在config文件中的 rules 中加入如下配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-react',
      ],
      plugins: [
        ["@babel/plugin-proposal-decorators", {"legacy": true}],
        ["@babel/plugin-proposal-optional-chaining"],
        ["@babel/plugin-syntax-jsx"],
      ]
    }
  }
}

重启项目，异常就没有了