简单了解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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
20个最新的jQuery插件
Jan 13 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
javascript实现简易计算器的代码
May 31 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 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全排列递归算法代码
2012/10/09 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
善意的谎言事例
2014/02/15 职场文书
操行评语大全
2014/04/30 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
运动会通讯稿300字
2015/07/20 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书