Vue学习笔记之组件的应用javascript医疗数据-

29 五月

星期五, 29 五月 2020 09:10 Last Updated on 星期五, 29 五月 2020 09:10 0 Comments

Vue组件的应用：

1、基础使用：第一步创建组件，第二步注册组件，第三步使用组件。在注册组件是需要用到template的属性。

Vue学习笔记之组件的应用javascript医疗数据-

全局组件和局部组件

Vue学习笔记之组件的应用javascript医疗数据-

组件的嵌套（父子组件）：注意先后顺序，先声明，后面才能用

Vue学习笔记之组件的应用javascript医疗数据-

2、组件的语法糖：直接在声明的时候直接进行组件的构造，省去了extend()的步骤

// 2、注册组件

Vue.component(‘cpn1’, {

template: `

<div>

</div>

`

})

组件分离写法：通过id来定位使用哪个组件

Vue学习笔记之组件的应用javascript医疗数据-

3、组件中数据存放的问题：组件里面不可以访问Vue实例中的Data数据，但组件（也可以有methods）中可以有自己的Data，不过此Data必须是一个函数，返回一对象：

Vue学习笔记之组件的应用javascript医疗数据-

组件中data为什么一定是函数：如果不是函数，可能造成数据在多次引用的时候，会出现相互影响的错误，所以要用函数来返回数据，这样每次引用组件的时候，新生成一个对象，每个对象保存自己的状态值。如下图的例子，引用了两次组件，但是修改一个组件的值时，并不会影响到另外一个所引用组件的值。

Vue学习笔记之组件的应用javascript医疗数据-

4、父组件向子组件传递数据用：props，在传数据时一定要用动态绑定的属性v-bind 或糖语法：冒号

Vue学习笔记之组件的应用javascript医疗数据-

props的数据验证：

Vue学习笔记之组件的应用javascript医疗数据-

Vue学习笔记之组件的应用javascript医疗数据-

5、子组件向父组件传递数据：用自定义事件$emit()

Vue学习笔记之组件的应用javascript医疗数据-

子组件定义事件

Vue学习笔记之组件的应用javascript医疗数据-

父组件通过v-on监听子组件事件

Vue学习笔记之组件的应用javascript医疗数据-

6、小结：

Vue学习笔记之组件的应用javascript医疗数据-

展开阅读全文

45
评论 42
x
海报

扫一扫，海报
1
手机看

到微信朋友圈

x

扫一扫，手机阅读
打赏

打赏

大数据时代

“你的鼓励将是我创作的最大动力”

5C币 10C币 20C币 50C币 100C币 200C币

确定

Vue学习笔记之组件的应用javascript医疗数据-

本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器下载并得到。

ImovieBox网页视频下载器下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.

阅读和此文章类似的: 全球云计算