Vue学习总结之二

1.组件化开发

组件的使用分三个步骤首先:
创建组件构造器

const firstComponent = Vue.extend({
	template:
	<div>hhhhhhhhhh没想到我是组件吧</div>

})

注册组件

Vue.component('f-comp',firstComponent)

使用组件

<f-comp></f-comp>

Vue.component()注册组件时,组件的注册是全局的,可以被挂载在任意一个vue创建出来的实例中使用

  • 语法糖的使用:
    全局组件:
Vue.component('s-comp',{
	template:
		`
		<div>我是全局组件</div>
		`
})

局部组件:

let vm = new Vue({
	el:'#app',
	components:{
	"t-comp":{
	template:
	`
	<div>我也是组件</div>
	`
	}
}
})

模板可以分离出去,script标签的类型选择x-template,一定要写id,然后在组件中绑定id。
或者使用标签

Vue组件有自己存储数据的地方,与实例不同的是
data是一个函数,并且需要return你所需要的数据,这个数据是对象

为什么data在组件中必须是一个函数呢?

原因是在于Vue让每个组件对象都返回一个新的对象,因为如果是同一个对象的,组件在多次使用后会相互影响。

2.父子组件的通信

父传子采用props,子传父采用事件发送消息

  • props的用法 在实例中定义数据message 使用子组件时绑定一个属性,然后这个属性=“message”,接着在组件中使用props[‘你定义的属性名’]
    然后就能在组件中使用实例中的属性了,,父传子和实例传组件是一样

  • 事件传递值的用法:
    子组件通过自定义事件中的方法调用this.$emit(‘自定义事件名’,传递的参数)
    接着发生事件时调用父组件的方法,父组件中的方法需要形参去接收这个传递过来的参数

3.父子组件的访问方式

  • 父组件访问子组件使用 $ children或$refs
    this. $ children是一个数组对象,它包含子组件的对象。
    $children的缺陷:
    通过 $children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。
    但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
    有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用 $refs
    $ refs的使用:
    $refs和ref指令通常是一起使用的。
    首先,我们通过ref给某一个子组件绑定一个特定的ID。
    其次,通过this. $refs.ID就可以访问到该组件了。
    总结: $children访问子组件时存在多个子组件只需要拿到其中一个时我们往往不能确定它的索引值。而refs可以给子组件添加一个属性ref绑定一个特定ID。

  • 子组件访问父组件使用 $parent
    注意:这种方法会导致父组件和子组件之间的耦合都太高,如果直接修改父组件会导致数据混乱,不利于开发和调试

4.插槽slot

在组件中使用

<slot>我是插槽</slot>

就能开启一个插槽

该插槽插入什么内容由父组件决定,中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容

<comp></comp>   显示默认内容“”“我是插槽”
<comp><h2>好好</h2></comp>    显示h2的内容“”“好好”

我们给插槽一个属性name,插槽就变成了具名插槽,当父组件中那个标签想要放在对应插槽就可以使用slot = “name属性值”,就会把该内容放到对应具名插槽中。

  • 作用域插槽
    父组件替换插槽标签,但是内容由子组件提供。
    首先插槽中绑定一个属性对应值为需要显示的内容数据
    通过获取到slotProps属性,子组件中的内容可以通过slotProps.属性名获取到。

5.前端模块化开发

模块化开发其实就是封装
在一个函数或类前面加上export就可以将这个类导出,而在另一个文件中使用import就可以导入这个函数或类。
我们可以使用export default导出函数或者类,到时候在使用import导入时使用者可以自定义名字。但是在同一个模块中export default只允许存在一个

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值