简述vue中父子组件是怎样相互传递值的(基础向)
前言
首先,你需要知道vue中父组件和子组件分别指的是什么?
父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容)
这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件
子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名)
定义组件名的2种方式(截图截自vue官网)
注:建议在html中引用组件时(非字符串模板),组件命名都用短横线命名且字母全小写的方式
父组件向子组件传递值
父组件:通过属性的形式进行传递(比如v-bind:content="item" ,通过v-bind属性把item的值动态赋给content变量)
子组件:通过props接收父组件传递的值
子组件向父组件传递值
子组件:通过$emit()方法发布事件广播
父组件:捕获到子组件向外触发的事件,然后可执行相应的方法
下图为子组件通过$emit()方法向外传递delete事件,父组件捕获到delete事件后执行handleDelete()方法
下图中methods方法里的this默认指向vue实例
不要把methods方法写成箭头函数,因为箭头函数会改变this的指向,使this不在默认指向vue实例,而指向undefined
同时vue实例中的data,computed,watch属性也都不要写成箭头函数,理由同上
注:@delete="handleDelete"为v-on:click="handleDelete"的简写;
:content="item"为v-bind:content="item"的简写
补充:怎么注册全局组件和局部组件
①:注册全局组件(用Vue.component(),组件名为todo-item,可自定义,推荐使用短横线分隔命名)
②:注册局部组件(通过一个 JavaScript 对象来定义组件)
注册局部组件后,直接引用组件<todo-item></todo-item>会报错,提示未注册该组件
解决方法是在vue实例中用components进行声明
注:对于components对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象
简述vue中父子组件是怎样相互传递值的(基础向)的更多相关文章
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- vue-cli中父子组件间的变量传递
vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- vue的父子组件间的相互传参props及props数据的多种验证机制
感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...
- vue中父子组件传递信息实现
为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...
- vue中父子组件钩子的执行顺序
我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父c ...
- vue 中父子组件传值:props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
随机推荐
- WPF 使用Propereties:Resources.resx里面的资源
<Window x:Class="Wpf180706.Window7" xmlns="http://schemas.microsoft.com/win ...
- php 获取今日、昨日、本周,上周、本月,上月,季度的起始时间戳和结束时间戳的方法
php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...
- 一个技术人,最重要的是:极客精神(好奇心 + 探索欲)(新de代码)
一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...
- asp.net下ueditor上传大容量视频报http请求错误的解决方法
故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点 ...
- Android零基础入门第36节:Android系统事件的响应
原文:Android零基础入门第36节:Android系统事件的响应 在开发Android应用时,有时候可能需要让应用程序随系统设置而进行调整,比如判断系统的屏幕方向.判断系统方向的方向导航设备等.除 ...
- 基于X.509证书和SSL协议的身份认证过程实现(OpenSSL可以自己产生证书,有TCP通过SSL进行实际安全通讯的实际编程代码)good
上周帮一个童鞋做一个数字认证的实验,要求是编程实现一个基于X.509证书认证的过程,唉!可怜我那点薄弱的计算机网络安全的知识啊!只得恶补一下了. 首先来看看什么是X.509.所谓X.509其实是一种非 ...
- C#字符串类型
C#字符串类型(string)是一种引用类型,是System.String的别名,表示Unicode字符串. 两种表示方法: 1.“C#” 直接用双引号括起来. 2.使用@,@“c:\test”,可以 ...
- Linux C/C++编程手册查阅方法
Linux Programmer's Manual & User Commands https://www.kernel.org/doc/man-pages/ 搜索框输入epoll调用搜索引擎 ...
- Qt5 结构及模块组成?
作为一个Qt的粉丝,对将于明年发布的Qt5充满了期待.可是想想Qt5将发生的巨大变化,心底又有点不安.Qt5到底会变成什么样呢? 看看近期Qt5的一些大动作: 从 QtCore中移除 QSetting ...
- 主要C++流派,看看你是哪一流
1. 经典C++流:类是核心,例程多用C Runtime的,很少用模版,一般是正统教育的结果.2. 古典C流:基本上当C用,偶尔用用对象,不使用异常,喜欢怀旧.3. MFC流:秉承MFC的风格,主要使 ...