简单了解vue中父子组件如何相互传递值(基础向)


Posted in Javascript onJuly 12, 2019

前言

首先,你需要知道vue中父组件和子组件分别指的是什么?

父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容)

  简单了解vue中父子组件如何相互传递值(基础向)

这里以root为挂载点,root里包含的所有内容可称为模板,即我们常说的父组件

 简单了解vue中父子组件如何相互传递值(基础向)

子组件:用Vue.component()注册的组件(下图todo-item就是组件的名称,该名称可自定义,推荐使用短横线分隔命名)

  简单了解vue中父子组件如何相互传递值(基础向)

定义组件名的2种方式(截图截自vue官网)

简单了解vue中父子组件如何相互传递值(基础向)

注:建议在html中引用组件时(非字符串模板),组件命名都用短横线命名且字母全小写的方式

父组件向子组件传递值

父组件:通过属性的形式进行传递(比如v-bind:content="item",通过v-bind属性把item的值动态赋给content变量)

简单了解vue中父子组件如何相互传递值(基础向)

子组件:通过props接收父组件传递的值

 简单了解vue中父子组件如何相互传递值(基础向)

子组件向父组件传递值

子组件:通过$emit()方法发布事件广播

父组件:捕获到子组件向外触发的事件,然后可执行相应的方法

下图为子组件通过$emit()方法向外传递delete事件,父组件捕获到delete事件后执行handleDelete()方法

下图中methods方法里的this默认指向vue实例

不要把methods方法写成箭头函数,因为箭头函数会改变this的指向,使this不在默认指向vue实例,而指向undefined

同时vue实例中的data,computed,watch属性也都不要写成箭头函数,理由同上

简单了解vue中父子组件如何相互传递值(基础向)

注:@delete="handleDelete"为v-on:click="handleDelete"的简写;

:content="item"为v-bind:content="item"的简写

补充:怎么注册全局组件和局部组件

①:注册全局组件(用Vue.component(),组件名为todo-item,可自定义,推荐使用短横线分隔命名)

简单了解vue中父子组件如何相互传递值(基础向)

②:注册局部组件(通过一个 JavaScript 对象来定义组件)

  简单了解vue中父子组件如何相互传递值(基础向)

注册局部组件后,直接引用组件<todo-item></todo-item>会报错,提示未注册该组件

简单了解vue中父子组件如何相互传递值(基础向)

解决方法是在vue实例中用components进行声明

  简单了解vue中父子组件如何相互传递值(基础向)

注:对于components对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
小程序实现搜索框
Jun 19 #Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 #Javascript
vue cli安装使用less的教程详解
Jul 12 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
使用Apache的rewrite
2021/03/09 Servers
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
python3实现磁盘空间监控
2018/06/21 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
合作意向协议书范本
2014/03/31 职场文书
环保志愿者活动方案
2014/08/14 职场文书
客户答谢会活动方案
2014/08/31 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
pandas中pd.groupby()的用法详解
2022/06/16 Python