[JavaScript知识库]vue组件

3. 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.$emit的第二个参数<zi@on?change="fList.push(...$event)" />

关系型组件间传值
可以通过父组件进行数据中转
$root当前组件树根实例
$parent父实例
$children直接子组件
$refs用于获取设置了ref属性的html标签或者子组件非关系型组件传值Eventbus事件总线,是一个独立的事件中心,用于管理不同的组件的传值操作.通过一个新的Vue实例来管理组件传值操作//发送数据的组件触发bus事件,接收数据的组件给bus注册对应的事件//bus.$emit(“事件名”,数据)
// bus.$on(“事件名”,(此次参数为上面数据)=>{})

observable跨组件状态存储器

1. 创建并且导出存储的数据的对象
   export default new Vue.observable({
   text: “我是数据”
   })
2. 哪里需要哪里用
   

VueX
组件插槽
单个插槽

具名插槽

组件头部

没有名字的插槽内容1

没有名字的插槽内容2

组件头部

作用域插槽

export default {
data() {
return {
a: “内容a”,
b: “内容b”,
};
},
};

//

{{ atext }}

{{ btext }}

  <template v-slot:footer="dataobj">
    <h1>{{ dataobj.btext }}</h1>
  </template>