Vue子组件如何通过$emit向父组件更新属性，改为？

本文共计1492个文字，预计阅读时间需要6分钟。

目录+组件父子组件+$emit更新属性+效果图下+组件向父组件使用自定义事件+$emit传递数据无效的坑+子级向父级传递自定义事件+重点来了！！！+组件向父组件+$emit更新属性+$emit

目录

• 子组件传父组件 $emit更新属性
• 效果图图下
• 子组件向父组件使用自定义事件$emit传递数据无效的坑
• 子级向父级传递—自定义事件
• 重点来了！！！！

子组件传父组件 $emit更新属性

$emit(update: prop, “newPropVulue”) => $emit(update: 属性名, “新的属性值”)

例如修改swicth的开关

效果图图下

父组件

data() { return { swValue: true, ElementData : [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ]; }; },

父组件的 html

<el-table :data="ElementData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180">   <template>     <el-input v-model="input" placeholder="请输入内容"></el-input>   </template> </el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="ppp" label="选择">   <template slot-scope="scope">     <Sw v-model="swValue" :value.sync="swValue" @change="swc(scope.row)" />   </template> </el-table-column> </el-table>

父组件的方法中 可以接收 新的swValue值

 swc(val) {       console.log(val);       console.log(this.swValue);     },

子组件 Sw组件

<template>   <label role="checkbox" :class="['switch', { toggled }]">     <input type="checkbox" class="switch-input" @change="toggle" />     <div class="switch-core" :style="{ backgroundColor: toggled ? colorChecked : colorUnchecked }">       <div         class="switch-button"         :style="{           transition: `transform ${speed}ms`,           transform: toggled ? `translate3d(32px, 0px, 0px)` : null         }"       ></div>     </div>     <span class="switch-label label-right" v-if="toggled" v-html="labelChecked"></span>     <span class="switch-label label-left" v-html="labelUnchecked" v-else></span>   </label> </template>

<script> export default {   name: "ToggleSwitch",   data() {     return {       toggled: this.value     };   },   props: {     value: {       type: Boolean,       default: true     },     speed: {       type: Number,       default: 100     },     labelChecked: {       type: String,       default: "ON"     },     labelUnchecked: {       type: String,       default: "OFF"     },     colorChecked: {       type: String,       default: "#11CED2"     },     colorUnchecked: {       type: String,       default: "#E6EAF1"     }   },   watch: {     value: function(val) {       this.value = val;     }   },   methods: {     toggle(event) {       this.toggled = !this.toggled;       this.$emit("update:value", this.toggled);       this.$emit("change", event);     }   } }; </script>

<style scoped> .switch {   display: inline-block;   position: relative;   overflow: hidden;   vertical-align: middle;   user-select: none;   font-size: 10px;   cursor: pointer; } .switch-input {   display: none; } .switch-label {   position: absolute;   top: 0;   font-weight: 600;   color: white;   z-index: 2; } .switch-label.label-left {   left: 20px;   line-height: 20px;   border-top-left-radius: 2px;   border-bottom-left-radius: 2px;   color: #b5bdc8; } .switch-label.label-right {   right: 20px;   line-height: 20px;   border-top-right-radius: 2px;   border-bottom-right-radius: 2px; } .switch-core {   width: 50px;   height: 20px;   border-radius:10px;   line-height: 20px;   display: block;   position: relative;   box-sizing: border-box;   outline: 0;   margin: 0;   transition: border-color 0.3s, background-color 0.3s;   user-select: none; } .switch-button {   width: 16px;   height: 16px;   display: block;   position: absolute;   overflow: hidden;   top: 2;   left: 2;   z-index: 3;   transform: translate3d(0, 0, 0);   background-color: rgba(255, 255, 255, 1);   border-radius: 10px;   margin-top: 2px;   margin-left: 2px; } </style>

子组件向父组件使用自定义事件$emit传递数据无效的坑

子级向父级传递—自定义事件

当子组件需要向父组件传递数据时，用到的是自定义事件

自定义事件的流程：

在子组件中，通过$emit()来触发事件。

在父组件中，通过v-on来监听子组件事件。

我们来看一个简单的例子：

我们之前做过一个两个按钮+1和-1，点击后修改counter。

我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。

这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。

  <!--父组件模板-->   <div id="app">     <!-- 3.在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法 -->     <cpn @item-click="cpnClick"></cpn>   </div>     <!--子组件模板-->   <template id="cpn">     <div>       <!-- 1.在子组件中创建一个按钮，给按钮绑定一个点击事件 -->       <button v-for="item in categories" @click="btnClick(item)">         {{item.name}}       </button>     </div>   </template>     <script src="../js/vue.js"></script>   <script>     // 子传父 自定义事件       // 子组件      const cpn = {       template: '#cpn',       data() {         return {           categories: [{               id: 'aaa',               name: '热门推荐'             },             {               id: 'bbb',               name: '手机数码'             },             {               id: 'ccc',               name: '家用家电'             },             {               id: 'ddd',               name: '电脑办公'             },           ]         }       },       methods: {         btnClick(item) {           // 发射事件: 自定义事件           // 2.在子组件中，通过$emit()来触发事件           this.$emit('item-click', item)           // 注意！！！！这里的$emit事件名不要写成驼峰！！！脚手架里可以，会先编译成一个组件对象render函数         }       }     }       // 父组件      const app = new Vue({       el: '#app',       data: {         message: '你好啊'       },       components: {         cpn       },       methods: {         cpnClick(item) { // 这里的参数是接收子组件传过来的数据的           console.log('cpnClick', item);                    }       }     })   </script>

重点来了！！！！

这里的父组件是app，子组件是cpn

在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法，即监听的事件应该写在子组件cpn在父组件app里调用的标签上，而不是写在app上

这里的父组件触发其实是指的在父组件的作用域下，在子组件上v-on:触发，很久之前学的Vue了，今天做项目的时候写的时候写到app上了，还是自己太粗心了

  <!--父组件模板-->   <div id="app">     <!-- 在父组件子标签中，通过v-on来监听子组件事件 并添加一个响应该事件的处理方法 -->     <cpn @item-click="cpnClick"></cpn>   </div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。