Vue 子组件传父组件 $emit更新属性方式_vue.js_

子组件传父组件 $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

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

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

子组件 Sw组件

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

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

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

自定义事件的流程：

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

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

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

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

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

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

重点来了！！！！

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

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

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

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！