简单了解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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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/03/24 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
angularjs http与后台交互的实现示例
2018/12/21 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Python Queue模块详解
2014/11/30 Python
python通过smpt发送邮件的方法
2015/04/30 Python
详解Python中break语句的用法
2015/05/14 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python实现FM算法解析
2019/06/18 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
python初步实现word2vec操作
2020/06/09 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
学生喝酒检讨书
2014/02/06 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
初中班主任教育随笔
2015/08/15 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python