设置组件值
- 如果对象是个数组,不能直接使用数组下标的形式改变值,只能通过对应如push操作改变数据,或者直接改变引用
- 如果对象是Object,可以使用对象相关方法,不能直接使用.key的方式改变值。或者直接改变引用
- 可以直接使用
this.$set("对象","下标或者对象key",”值“);
修改
组件使用细节
- 使用组件创建tr时,一定要使用
<tr is="组件名">
的形式,否则结构会有问题,这里使用is就直接将tr替换成模板中的内容 - li标签类似tr注意
获取组件中dom节点
- 组件回去dom节点,在组件节点中添加
ref=“名称”
标签,使用 this.$hrfs.hef名称 获取dom节点,就可以使用原生js操作dom
触发父组件监听事件
- 使用
this.$emit("事件名")
可以出发订阅事件,即子组件中标记的@事件名="父组件触发事件"
父子组件值传递
- 子组件通过属性接收父组件的值,如:
conten="这里是传递的字符串"
,:content="这里传递vue的表达式的值"
,子组件通过pops["content","接收属性"]
接收值 - vue规定单向传递值,子组件只能接收值,不能改变值。如果传递的是对象,改变了值可能导致父组件其他地方的引用值改变,所以一般先用子组件定义值等于传递的值,然后使用子组件的值
- pops可以使用对象的形式进行传递数据类型校验、设置默认值,发布警告。实际感觉没什么用,可以直接百度学习
4.如果pops存在属性值,那么组件上的属性不会赋值到模板上,如果不接收属性则直接赋值到模板最外层上
给组件绑定原生事件
- 组件上设置
@click=“事件名”
实际绑定的是自定义事件,并非真正的点击事件。可以在模板中使用@click="事件名"
这里才是原生点击事件。 - 组件上设置原生点击事件
@click.native=“事件名”
非父子组件关系传递值:总线机制 观察者模式
1.使用代码 Vue.prototype.bus = new Vue();
使用该代码后,每次创建组件时都会存在bus属性,都指向一个引用。组件使用:this.bus.$emit('事件名',传递值)
触发事件。
2.接受组件中使用vue生命周期钩子,mounted(mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作),使用this.bus.$on('事件名(对应传递事件名)',方法(接收值){})
进行处理
vue插槽
- 在组件标签包含中的内容插入到子组件中,使用
<slot></slot>
插入到模板中,即为包含的内容 - 多个不同dom需要插入到模板不同位置时,在dom中添加
slot=“名称”
,然后在模板中使用<slot name="dom中slot名称0"></slot>
插入到对应位置
作用域插槽
1.在组件中添加<template slot-scope="数据">{{数据}}</template>
固定写法,然后在模板中使用<slot></slot>
做对应操作,这样就可以使用外部元素展示内部数据,外层可以使用vue表达式展示数据(有点绕,找官方文档理解下)
动态组件
1.使用<component :is="data数据"></component>
组件,可以改变vue对象中data中的value展示对应的value名字的模板
2.使用v-if="控制值"
时如果可以频繁切换,建议在模板中的外层元素中添加v-once
属性,vue会做内存的缓存,减少性能开销
坚持就是胜利,初次接触vue,希望后面能用熟练。学会这一门前端语言,有助于自己独立开发。