Vue基础组件知识点整理

Vue基础组件

Vue组件是什么

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

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

  1. 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 蒋德涛

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值