Vue学习笔记（五）——组件与实例

叁歲伎倆 2022-03-10 14:40 215阅读 0赞

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]

## 组件与实例定义的几个不同点： ##

1.  组件不需要指定el，实例则需要指定el；
2.  组件的data通常是一个函数，实例则通常是一个对象。

下面简单说明一下两者产生上述不同点的原因：

1.  组件通常需要复用（比如在v-for中循环生成），无法指定el，而实例则是全局唯一的，因此必须指定el；
2.  当组件的data是函数时，组件复用时生成的数据是每个组件各自维护一份，当组件的data是对象时，组件复用时生成的数据是所有组件公用一份，而实例没有复用的场景，是全局唯一的，因此定义为函数还是对象没有区别。

## 使用组件的几个注意点： ##

组件在声明时template只能有一个根元素（这一点和anguar的directive一样），如果尝试定义多个根元素，则会有以下错误提示：

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
    -

组件不能在内部修改传入的信息（即props内的参数），如果尝试修改，则会有以下错误提示：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: “xxx”

如果需要修改，可以通过$emit通知父元素修改。

组件可以指定ref属性（当前组件在父元素内的唯一标识符），此时父元素可以利用指定的ref属性通过以下方式来调用组件内的方法：

that.$refs.refValue.func();

如果不需要调用组件内的方法，则可以不指定ref属性。

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue框架学习笔记——创建Vue实例、实例与容器对应关系

文章目录创建Vue实例容器和Vue实例绑定容器中标签体的数据和实例中的数据动态绑定容器和实例一一对应 -----------------

深碍√TFBOYSˉ_/ 2024年02月18日 13:05/ 0 赞/ 56 阅读

相关 Vue实例与组件入门

让Vue框架跑起来，首先需要安装，通常在做大型项目时会使用到Vue官方推荐命令行工具 Vue CLI ， Vue CLI 的安装比较复杂，对于初学者来说先使用官方提供的cdn来

「爱情、让人受尽委屈。」/ 2023年06月17日 02:59/ 0 赞/ 9 阅读

相关 vue学习笔记（组件）

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，注册组件 Vue.component('todo-item',{ template:

川长思鸟来/ 2023年02月28日 04:26/ 0 赞/ 16 阅读

相关 Vue学习（组件传参）-学习笔记

文章目录 Vue学习（组件传参）-学习笔记父到子子到父父操作子-ref（类似于操作dom

爱被打了一巴掌/ 2023年01月23日 05:59/ 0 赞/ 18 阅读

相关 Vue学习笔记五

v-model v-model在双向绑定的时候会忽视value，checked，selected特征的初始值。 v-model可以绑定的控件有textarea,che

r囧r小猫/ 2022年06月09日 11:23/ 0 赞/ 197 阅读

相关 Vue学习笔记——实例和内置组件

> 概述：实例就是在构造器外部操作构造器内部的属性选项或者方法，就叫做实例？实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会，让Vue和其他框架

短命女/ 2022年05月19日 02:50/ 0 赞/ 208 阅读

相关 Vue学习笔记（五）——组件与实例

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 组件与实例定义的几个不同点： 1.

叁歲伎倆/ 2022年03月10日 14:40/ 0 赞/ 216 阅读

相关 Vue学习笔记(七) 组件

0、入门在开始正式讲解组件之前，我们首先来看一个简单的例子： <!DOCTYPE html> <html> <head>

水深无声/ 2021年11月05日 10:26/ 0 赞/ 350 阅读

相关【vue】学习笔记五：路由

文章目录 @\[TOC\] 路由在 vue 中使用 vue-router 设置路由高亮设置路由切换动效在路由规则中定义参数使用 \`children\`

悠悠/ 2021年09月21日 00:10/ 0 赞/ 379 阅读

相关【Vue】学习笔记四：组件

文章目录 @\[TOC\] 组件全局组件定义的三种方式组件中展示数据和响应事件【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象使用\`c

绝地灬酷狼/ 2021年09月20日 23:46/ 0 赞/ 541 阅读