简述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 ...
随机推荐
- [ 转]Node.js模块 require和 exports
什么是模块? node.js通过实现CommonJS的Modules/1.0标准引入了模块(module)概念,模块是Node.js的基本组成部分.一个node.js文件就是一个模块,也就是说文件和模 ...
- Xamarin简介
简介 简单来说,Xamarin提供了使用C#完成iOS,Android和Windows Phone三个移动平台开发的可能性Xamarin包括Xamarin.Andriod.Xamarin.IOS.Xa ...
- 每日一题:Java异常处理
什么是异常 在理想情况下,程序总会运行在很完美的环境中,网络不会终端,文件一定存在,程序不会有 BUG.但是,理想很丰满,现实很骨干,实际生产环境中,网络可能会中断,文件可能会找不到,内存可能会溢出, ...
- 使用sklearn构建含有标量属性的决策树
网络上使用sklearn生成决策树的资料很多,这里主要说明遇见标量数据的处理. 经查验参考资料,sklearn并非使用了课上以及书上讲的ID3算法,而是选择了CART,该算法生成二叉树:scikit- ...
- Android零基础入门第65节:RecyclerView分割线开发技巧
在上一期通过简单学习,已经领略到了RecyclerView的灵活性,当然都是一些最基础的用法,那么本期一起来学习RecyclerView的分割线使用. 相信有的比较细心的同学已经发现了,使用Recyc ...
- MQTT-CN MQTT协议中文版
欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingyang 项目地址:https://github.com/liangjingyang/MQTT-C ...
- 国外优秀的UI设计资源库收集
国外优秀的UI设计资源库 网站设计或者说UI设计对于Web上的运用是非常的关键,一个站做得好不好,能不能吸引人的眼球,设计占了不低的地位,但话又说回来,Web前端人员又有多少人是设计专业毕业,具有这方 ...
- VS2008下QT整合OGRE
环境配置如下:VS2008 QT版本:4.8.1 OGRE版本: 1.7.4 请先配置好QT for vs2008 : 下载QT VS2008的包,然后下个QT VS的插件 版本必须是VS2008 ...
- x64内联汇编调用API(需intel编译器,vc不支持x64内联汇编)
#include "stdafx.h" #include <windows.h> STARTUPINFOW StartInfo = {0}; PROCESS_INFO ...
- Excel报表开发(本节主要讲述导出到Excel操作)
一.Excel导入到GridView以及数据库操作比较简单,这儿不做过多讲解,需要注意的有二点: 1.设置IMEX=1将强制混合数据转换为文本. 2.解决Excel驱动程序默认读取8行:将" ...