props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成。
什么时候需要自定义事件呢?
当子组件需要向父组件传递数据时,就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
在子组件中,通过$emit()来触发事件。
在父组件中,通过v-on来监听子组件事件。
 <div id="app">
<cnp @itemclick="cnpClick"></cnp>
</div> <template id="cnp">
<div>
<button v-for="item in catgories" @click="btnclick(item)">
{{item.name}}
</button>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cnp = {
template: '#cnp',
data () {
return {
catgories: [
{id: 'aaa', name: '热门推荐'},
{id: 'bbb', name: '手机数码'},
{id: 'ccc', name: '家用办公'},
{id: 'ddd', name: '居家用品'}
]
}
},
methods: {
btnclick (item) {
// console.log(item)
this.$emit('itemclick', item)
}
}
} const app = new Vue ({
el: '#app',
data: {
message: 'aaaaa'
},
components: {
cnp
},
methods: {
cnpClick (item) {
console.log(item)
}
}
})
</script>

Vue学习笔记-组件通信-子传父(自定义事件)的更多相关文章

  1. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  2. Vue学习笔记-组件通信-父传子(props中的驼峰标识)

    在组件中,使用选项props来声明需要从父级接收到的数据.props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称.方式二:对象,对象可以设置传递时的类型,也可以设置默认值等. & ...

  3. 浅谈vue学习之组件通信

    vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...

  4. vue的逆向传值(子传父)

    逆向传值:子组件传值给父组件叫做逆向传值  (是不v欸允许的,必须经过事件触发才能传值) 逆向传值步骤: 1.要传值必须先抛出,在接收 语法: this.$emit("event" ...

  5. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue学习笔记-父子通信案例

    <div id="app"> <cpn :number1="num1" :number2="num2" @num1chan ...

  7. Vue 学习笔记 — 组件初始化

    简书 在vue中有3个概念很容易搞混,data,computed,props,特别是我们这些原后端开发人员. new Vue({ el: "#x", data: { id: 1 } ...

  8. vue学习笔记——组件的优化

    Vue 应用性能优化指南 1 给组件定义name,然后在同级目录新建index文件: import Count from './count.vue' export Count; 2 优化大数据的列表 ...

  9. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

随机推荐

  1. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  2. HDU 5179 beautiful number (数位dp / 暴力打表 / dfs)

    beautiful number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. noi.ac #712 练级

    分析 把船当作点 练级当作边 发现一个连通块大于n-1的边的条数的奇偶性影响这个连通块的答案 于是并查集维护即可 代码 #include<bits/stdc++.h> using name ...

  4. thread_process_action

    import math import random import re import sys import threading from time import ctime, sleep from l ...

  5. python简单的函数定义和用法实例

    python简单的函数定义和用法实例 这篇文章主要介绍了python简单的函数定义和用法,实例分析了Python自定义函数及其使用方法,具有一定参考借鉴价值,需要的朋友可以参考下 具体分析如下: 这里 ...

  6. javascript 调试 使用console.table()

    或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对 ...

  7. JS DOM元素的操作(创建,添加,删除,和修改属性)

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  8. 永远让比较函数对相等的值返回false

    今天在刷OJ的时候,有一道题一直Runtime Error,查错出来是比较函数写挂掉了,但是不知道错误在哪,于是查阅资料:永远让比较函数对相等的值返回false 具体可点击此处查看分析:链接 另外,在 ...

  9. 配置adb环境与简单命令

    adb命令具有安装卸载apk,拷贝推送文件,查看设备硬件信息,查看应用程序占用资源,在设备执行shell命令等 客户端:通过adb调用客户端 服务器server:运行后台,负责客户端与进程进行通信 守 ...

  10. PowerShell - Invoke VBA function

    $xl = new-object -comobject Excel.Application $source_wb = $xl.workbooks.open($source) $xl.visible=$ ...