Vue基础组件知识点整理

最新推荐文章于 2023-08-23 09:40:24 发布

Gary_咖喱酱

最新推荐文章于 2023-08-23 09:40:24 发布

阅读量330

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_57674396/article/details/121363911

版权

Vue基础组件

Vue组件是什么

1.组件就是自己写的一部分封装好的功能，组件提高了代码的可重用性，减少代码的重复书写。（别人写的叫插件）
需要使用时直接引入即可。

Vue组件构成都由三部分组成

template->组件的模板结构
script->组件的JavaScript行为
style->组件的样式

其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

template模板是声明了数据和最终呈现给用户的dom之间的映射关系，初始化数据通常为私
有状态，方法methods对数据进行操作，接受外部参数，组件之间通过参数来进行数据传递和
共享props，参数默认是单向绑定，也可以双向绑定（MVVM）。

*创建一个template模板组件

Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
	                  data:function(){
			return {count:0}
			},                                //template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
     	                     template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'   })

Vue组件的注册

1.为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
这里有两种组件的注册类型：全局注册和局部注册。
app.component（）全局组件应用方法

通过 Prop 向子组件传递数据

1.Prop 是可以在组件上注册的一些自定义 attribute。我们可以用 props 选项将其包含在该组件可接受的 prop 列表中：当一个值被传递给一个 prop attribute 时，它就成为该组件实例中的一个 property。该 property 的值可以在模板中访问，就像任何其他组件 property 一样。
一个组件默认可以拥有任意数量的 prop，无论任何值都可以传递给 prop。

监听子组件事件

子组件一些功能可能要求我们和父级组件进行沟通。父级组件就会接收该事件并更新数据

5.1：有的时候需要用一个事件来抛出一个特定的值，这时可以使用 $emit 的第二个参数来提供这个值
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值
5.2：在组件上使用v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件

(v-bind:属性，属性性会导致Vue将所指的属性的值当做合法表达式来处理，所有支持我们在属性值里面做改变。 v-bind 简写属性的简写例子: :title="title+msg")
(v-on是用来绑定事件监听器，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。缩写：通常缩写为 @ 符号)

通过插槽发布内容

Vue 自定义的 <slot> 元素（即v-slot指令）

app.component('alert-box', {
                                 template: `
                              <div class="demo-alert-box">
                              <strong>Error!</strong>
                              <slot></slot>
                             </div>
                                       `
                                    })

我们使用 <slot> 作为我们想要插入内容的占位符！

动态组件

在不同组件之间进行动态切换
通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

                      <!-- 组件会在 `currentTabComponent` 改变时改变 -->
                      <component :is="currentTabComponent"></component>

解析Dom模板时所需要注意的问题

元素位置受限
解决办法：我们可以使用特殊的 is attribute 作为一个变通的办法。

大小写不敏感
解决办法： HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。
驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值。

-------编辑于2021/11/16 蒋德涛