简单了解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 UI CSS Framework开发Widget的经验
Aug 21 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
js实现左右轮播图
Jan 09 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php之字符串变相相减的代码
2007/03/19 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python命名空间(namespace)简单介绍
2019/08/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
优秀求职信范文分享
2014/01/26 职场文书
创新型城市实施方案
2014/03/06 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
公司委托书格式范文
2014/10/09 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers