Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据
一、概念解析
挂载点: Vue实例的el属性对应的id,vue只会处理挂载点下面包含的内容
模板: 挂载点下面包含包含的标签就是模板
实例: 写上挂载点和模板等很多属性
<div id="root"><h1>{{msg}}</h1> <span></span> </div> new Vue({ //new 了vue实例 el:"#root" //挂载点 id="root"的div,说明这个实例的范围在这个div里包含的内容 })
1、父组件向子组件传递数据
父组件通过属性向子组件传递数据
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"
<div id="app"><child message="hello!"></child> </div> <script> // 子组件 Vue.component('child', { // 声明 props props: ['message'], template: '<span>{{ message }}</span>' }) // 父组件 new Vue({ el: '#app' }) </script>
在上面的例子中定义了一个子组件child,子组件的message需要在 props属性里面显示声明,然后父组件通过message属性传了值“hello”,子组件就可以使用。
2、子组件向父组件传递数据
子组件向父组件传递数据通过监听 $emit 函数
订阅者模式:子组件触发一个函数,父组件监听这个函数。最终在父组件里定义函数处理
<div id="root"><div> <input v-model="inputValue" type="text"> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></todo-item> </ul> </div>
<script>//子组件//子组件的模板是template定义的标签范围 Vue.component('todo-item',{ props:['content','index'], //定义props,接收父组件传递的属性 template:'<li @click="handleClick">{{content}}</li>', methods:{ handleClick:function () { this.$emit('delete',this.index); //当点击子组件的li触发delete事件 } } }) //父组件 //父组件没有写template的内容,则它的模板就是挂载点容器下面包裹的所有 new Vue({ el:"#root", //挂载点是id="root"的容器 data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function () { this.list.push(this.inputValue); this.inputValue='' }, handleDelete:function (index) { this.list.splice(index,1) } } }) </script>
···
在上面的代码里定义了,父组件、子组件。父组件通过props的方式向子组件传递数据,子组件通过触发事件的方式向父组件传递参数
下面三行代码是子组件向父组件传递参数的核心
解释说明:
@delete="handleDelete" //父组件监听delete事件this.$emit('delete',this.index); //子组件发布delete事件,并且传递数据给父组件 handleDelete:function (index) { //当父组件监听到时,拿到子组件带来的数据,进行的函数操作 this.list.splice(index,1) }
转载于:https://www.cnblogs.com/wang-sai-sai/p/10234719.html
Vue父组件和子组件之间传递数据相关推荐
- vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
- vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组 显示两个组件的信 ...
- vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例 模仿v-model实现案例 我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例 这是父组件的东西.利用这个框改变值,看看有没 ...
- vue 父链和子组件索引_Vue.js 学习笔记 第7章 组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
- Vue 中 props 传值,父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
- 【vue】父组件与子组件之间的数据交互
一.前端项目目录结构 二.vue单文件组件格式 注意1: scoped表示对当前组件生效 <style scoped> </style> 这个是设置组件中html样式(css) ...
- Angular中父子组件之间父组件给子组件传值、传递方法、传递自己
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
- vue 传递多行数据_vue父组件向子组件传递多个数据的实例
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个 ...
- vue 父组件与子组件之间的传值(普通传值)
一,子组件向父组件传值($emit): 1.定义子组件 <template><div>子组件:<span>{{childValue}}</span>&l ...
最新文章
- Num55 boss09(activiti安装以及API)
- 百分点大数据技术团队:乘风破浪 海外数据中台项目实践
- STL系列:关联容器的操作
- xp系统本地服务器环境配置,Windows XP安装Apache环境图文详解Windows服务器操作系统 -电脑资料...
- sap 归档(ARCHIVE)
- Linux电源管理系统架构和驱动(1)-Linux电源管理全局架构
- 汪文君 java_汪文君JAVA多线程编程实战 视频教程 下载
- sql 按名称首字母拼音排序
- 福昕PDF电子文档处理套装软件中文企业版9.01
- 解决微信浏览器不能自动播放视频
- 电磁铁基础知识介绍及各系列性能比较
- 回帖专用奉承话,呵呵
- CRM和SCRM,到底有什么区别?
- M个苹果放N个篮子,篮子可以为空,有多少种放法?
- 万网域名注册促销活动 - 阿里云域名优惠口令免费获取
- mac 外接显示器 发热严重 解决方案
- 狐友老欧头疼了一天,VFP转换成JSON格式总不对,竟是乱码惹的祸
- 微信公众号运营实用小技巧分享
- long(Long)与int(Integer)四种类型之间互相转换的方法分享
- Configuring Add-on Service