目录 子组件传父组件 $emit更新属性 效果图图下 子组件向父组件使用自定义事件$emit传递数据无效的坑 子级向父级传递自定义事件 重点来了！！！！ 子组件传父组件 $emit更新属性 $em
目录
- 子组件传父组件 $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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。