简单了解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 面向对象之神奇的prototype
Feb 26 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
Javascript Promise用法详解
May 10 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 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可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
脚本收藏iframe
2006/07/21 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Flask-Mail用法实例分析
2018/07/21 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
keras得到每层的系数方式
2020/06/15 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
培训班主持词
2014/03/28 职场文书
有关爱国演讲稿
2014/05/07 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
先进事迹材料范文
2014/12/29 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android