子组件传父组件 $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="https://www.atool.online/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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。