- vue组件
组件
全局组件和局部组件
全局
// main.js
// 在入口文件导入全局组件的文件夹
import Qj from ‘./components/qj.vue’
// 把 Qj 文件注册为全局组件
Vue.component(‘QJ’, Qj);
// 注意,要在 new Vue() 之前注册
局部
// 哪个组件要用到该局部组件就组件导入
import Jb from “./components/jb.vue”;
export default {
// 把组件注册为这个组件的局部组件
components: {
Jb,
},
};
父子组件间传值
父向子传值
// 1. 子组件对象通过props属性来接收父组件的传值
export default {
name: “Zi”,
props: [“text”],
};
// 2. 在使用子组件的时候把父组件里面的值通过属性绑定来传递
// 3. 该值可以在子组件内正常使用
子组件
props的具体规则
props:{
item1:{
// 类型
type:[String,Array],
// 必填
required:trun,
// 默认值,如果默认值为数组或者对象时,必须为工厂函数返回的形式
default:“默认值”,
//验证函数,return值为false时Vue.js会报错,如果值未传递,则会跳过
validator:function(value){
return value.indexOf(1)
}
}
}
非props属性
// 1.当父组件给子组件设置了属性,但此属性在props中不存在,这是会自动绑定到子组件的根元素上
// 2.如果组件跟元素已经存在对应属性,则会替换组件内部的值,class和style例外,他们会合并
// 3.在子组件导出对象内设置inheritAttrs:fakse,则不会受父组件赋值的影响,class和style是例外
子向父传值:: 通过自定义事件实现
// 子组件
<button @click=“c”>子组件按钮
{
data() {
return {
list: [1, 2, 3, 4],
}
},
methods: {
c() {
// 参1:自定义事件名称, 参2:父组件事件接收的实参
this.$emit(“on-change”, this.list);
}
},
}
// 父组件
<zi @on-change=“onf” />
{
data() {
return {
fList: [],
};
},
components: {
Zi,
},
methods: {
// data为this.KaTeX parse error: Expected 'EOF', got '}' at position 62: …data; }, }̲, } // 或者 //event为this.
e
m
i
t
的
第
二
个
参
数
<
z
i
@
o
n
−
c
h
a
n
g
e
=
"
f
L
i
s
t
.
p
u
s
h
(
.
.
.
emit的第二个参数 <zi @on-change="fList.push(...
emit的第二个参数<zi@on−change="fList.push(...event)" />
关系型组件间传值
可以通过父组件进行数据中转
$root当前组件树根实例
$parent父实例
$children直接子组件
r
e
f
s
用
于
获
取
设
置
了
r
e
f
属
性
的
h
t
m
l
标
签
或
者
子
组
件
非
关
系
型
组
件
传
值
E
v
e
n
t
b
u
s
事
件
总
线
,
是
一
个
独
立
的
事
件
中
心
,
用
于
管
理
不
同
的
组
件
的
传
值
操
作
.
通
过
一
个
新
的
V
u
e
实
例
来
管
理
组
件
传
值
操
作
/
/
发
送
数
据
的
组
件
触
发
b
u
s
事
件
,
接
收
数
据
的
组
件
给
b
u
s
注
册
对
应
的
事
件
/
/
b
u
s
.
refs用于获取设置了ref属性的html标签或者子组件 非关系型组件传值 Eventbus事件总线,是一个独立的事件中心,用于管理不同的组件的传值操作.通过一个新的Vue实例来管理组件传值操作 // 发送数据的组件触发bus事件,接收数据的组件给bus注册对应的事件 // bus.
refs用于获取设置了ref属性的html标签或者子组件非关系型组件传值Eventbus事件总线,是一个独立的事件中心,用于管理不同的组件的传值操作.通过一个新的Vue实例来管理组件传值操作//发送数据的组件触发bus事件,接收数据的组件给bus注册对应的事件//bus.emit(“事件名”,数据)
// bus.$on(“事件名”,(此次参数为上面数据)=>{})
observable跨组件状态存储器
- 创建并且导出存储的数据的对象
export default new Vue.observable({
text: “我是数据”
}) - 哪里需要哪里用
VueX
组件插槽
单个插槽
子组件A
// 插槽具名插槽
组件头部
没有名字的插槽内容1
没有名字的插槽内容2
组件头部
作用域插槽
export default {
data() {
return {
a: “内容a”,
b: “内容b”,
};
},
};
//
{{ atext }}
{{ btext }}
<template v-slot:footer="dataobj">
<h1>{{ dataobj.btext }}</h1>
</template>