问题阐述：vue中最大的特色莫过于组件化，让我们的代码可以插拔式的应用，但是组件怎样绑定事件呢，有很多复杂化的做法，今天发现一个简单的办法
1、给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）。
2、等同于在自组件中：子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)
代码：
<template>
<div class="putongziping_container">
<div class="title">
<span>{
{
yewuAbility }}</span>
<i></i>
<span>{
{
zipingGrade }}</span>
</div>
<div class="total">
<ziping-defen style="margin: 10px 0 0 1px"></ziping-defen>
<ziping-totalfen style="margin: 74px 0 0 0"></ziping-totalfen>
</div>
<div class="detail">
<select-fen style="margin: 20px 0 0 30px" v-for="(item,index) in detailGrade" :key="index" :detail="item"></select-fen>
</div>
<div class="button">
//看这里看这里看这里看这里看这里看这里看这里看这里看这里看这里看这里看这里
<my-button style="margin: 0 37px 0 0" :title="back" :isWhite="true" @click.native="returnBack"></my-button>
<my-button :title="ctrlS" :isBlue="true"></my-button>
</div>
</div>
</template>
<script>
import MyButton from "../../components/common/button";
import ZipingDefen from "../../components/putong/zipingdefen";
import SelectFen from "../../components/putong/selectfen";
import ZipingTotalfen from "../../components/putong/zipingtotalfen";
export default {
components: {
MyButton,
ZipingDefen,
SelectFen,
ZipingTotalfen,
},
data() {
return {
yewuAbility: "业务能力",
zipingGrade: "自评打分",
back: "返回",
ctrlS:"保存",
detailGrade: [
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML9", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
{
skillName: "HTML5", grade: "5" },
// { skillName: "HTML5", grade: "5" }
],
};
},
created() {
},
methods: {
returnBack() {
this.$router.push("/putongradar");
}
},
computed: {
},
};
</script>
<style lang='less' scoped>
</style>