Vue项目实战01: vue里父传子传事件(easy)

vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了
提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递.
实现肯定是能实现的下面我们一起看一下一种简单的方法

父组件:

在父组件中定义了传递的方法 method 并在父组件中打印

<template><div class="about"><Son :arr="arr"></Son></div>
</template>
<script>
import Son from './About'
export default {components:{Son},data(){return{arr:[{id: 1,name: '叮咚',method: () => {console.log('叮咚')}},{id: 2,name: '小小',method: () => {console.log('小小')}}]}}
}
</script>

子组件

<template><div class="about"><div v-for="(item, index) in arr" :key="index"><button @click="item.method()">{{ item.name }}</button></div></div>
</template>
<script>
export default {props: {arr: {type: Array,default: () => [],},},
};
</script>

Vue项目实战01: vue里父传子传事件(easy)相关推荐

【Vue项目实战】vue.js2.5 饿了么APP（1）概述+项目准备
一.概述 1. 项目简介使用vue.js vue是当前最火的MVVM框架,(优点:轻量.简洁.高效.数据驱动.组件化) 本项目做的是:高仿上线外卖APP商家模块开发过程:需求分析-脚手架工具-数据 ...
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端.使用 vue-cli 创建项目. 本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在项目demo 持续贴出完整项目代码.也会更新博客. 第二节传送 ...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据,参考这里添加局部左右滑动(即将上映页),参考 (左右滑动也可使用插件) 组件化开发,相同代码可以提取出来作为一个组件来调用,减少代码量,提 ...
Vue项目实战02 : vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router ...
Vue项目实战03 : vue中 meta 路由元信息
路由元信息 meta: 每个路由的标识信息,是路由独有的一个信息,无论在路由中是否定义meta,在组件中都可以通过this.$route.meta访问到,如果没有定义,返回{} 在组件中: this. ...
Vue项目实战04 : Vue 轮询接口的实现
项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据一般都会使用setInterval,但要注意单纯使用它会导致页面卡死,所以一定要清除定时器 setInterval不会清除定时器队列,每重复执 ...
【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录前言完效果图 : 登录含签权注册带正则个人中心下拉加载更多主页修改个人中心视频播放加关注+收藏评论盖楼A回复B B回复C C回复A类似项目开始封装登录.注册封装登录从零到一 ...

Vue项目实战01: vue里父传子传事件(easy)

父组件:

子组件

Vue项目实战01: vue里父传子传事件(easy)相关推荐

最新文章

热门文章

Vue项目实战01: vue里父传子 传事件(easy)

父组件:

子组件

Vue项目实战01: vue里父传子 传事件(easy)相关推荐

最新文章

热门文章

Vue项目实战01: vue里父传子传事件(easy)

Vue项目实战01: vue里父传子传事件(easy)相关推荐