前言:
身为小白的我, 在每次用到Element-ui,Vant等组件库的时候常常会思考一个问题，有些值传过去是干嘛的,到底背后隐藏了些怎样的秘密，接下来我们一起来探究一下，组件封装的奥秘吧。
一.什么是组件？
我对组件的理解，当我们用到一些公共的东西的时候，这个时候会将它单独的封装成一个组件，拿来复用，也就是为了避免些相同的代码呗。
二.如何注册一个组件
1.常规的注册方式
方法:在父组件里面进行引入，然后注册使用。
使用方式：当作标签来进行使用
2.APP.vue---------父组件
<template>
<div class="">
<firend />
</div>
</template>
<script>
// 导入friend.vuei
import firend from "./components/firend.vue";
export default {
components: {
firend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
子组件
<template>
<div class="">
<h1>得过且过？</h1>
</div>
</template>
<script>
export default {
name: "",
methods: {},
};
</script>
<style scoped></style>
图示：
3.使用的场所
你把这个组件封装之后，以后在任何组件内使用都可以进行使用。
三.Vue.use的使用
在以前写的文章也讲过Vue.use的使用，现在来回顾一下。
1.用来干什么
答:用来注册组件使用我门在Element-Ui中也看到过。
2.具体的使用
里面有一个install方法，并且提供一个Vue的实例化对象。
Vue.use里面是一个对象。通过Vue.use会触发里面install这个方法。
3.用来注册注册一个组件
(1)创建一个index.js存放要注册的组件
import friend from "./firend.vue";
const zujian = {
install(Vue) {
Vue.component("friend", friend);
},
};
export default zujian;
注意一下component第一个是字符串类型。
(2)在main.js里面进行导入
import zujian1 from "./components/index";
Vue.use(zujian1);（3）在任意的组件里面当作标签都可以进行使用
? ? <friend >? ? ?</friend>（4）在install方法里面还可以干的事情，个人理解更传过来的参数Vue有关系，相当于传过来Vue的实例话对象，类似于import Vue from "vue"。
1.? 过滤器的名字:?Vue.directive('dirName',{ //指令名 .... })
2. 在Vue的原型链上挂载方法?:?Vue.prototype.$atters=function(){? }
3.?过滤器：Vue.filter('指令的名字','回调函数')。
四.在来介绍一下插槽
1.理解,你对插槽的理解是什么， 我的理解是想当于预留了一个位置，这个位置并不知道要放什么东西。相当于占位。
2.几种插槽的方式。
默认插槽
具名插槽
作用域插槽
3.默认插槽也叫匿名插槽
APP.Vue
<template>
<div class="">
<friend> 要传入给子组件的值 </friend>
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
friend.vue
<template>
<div class="">
<slot></slot>
</div>
</template>
<script>
export default {
name: "",
methods: {},
};
</script>
<style scoped></style>
图示：
?4.具名插槽
顾名思意，也就是有名字的插槽。一个名字对应一个位置
APP.vue
<template>
<div class="">
<friend #header> 传给头部 </friend>
<friend #main> 传给中间 </friend>
<friend #footer> 传给尾部</friend>
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
friend.vue
<template>
<div class="">
<slot name="header"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: "",
methods: {},
};
</script>
<style scoped></style>
图示：
?
?5.作用域插槽----------用来传递数据
类似于一个子传父的过程。
App.vue
<template>
<div class="">
<friend v-slot="aa">{{ aa }} </friend>
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
friend.vue
<template>
<div class="">
<slot :data="name"></slot>
</div>
</template>
<script>
export default {
data() {
return {
name: {
age: 20,
},
};
},
name: "",
methods: {},
};
</script>
<style scoped></style>
图示：
?
五.V-model在组件上的传值
1.定义解析，这也是组件传值的方式 ，父向子传值，子也能修改父组件里面的值。
2.APP.vue
<template>
<div class="">
<friend v-model="name"> </friend>
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
data() {
return {
name: "张三",
};
},
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
firend.vue
<template>
<div class="">
{{ value }}
<button @click="fn">点击修改父组件里面的值</button>
</div>
</template>
<script>
export default {
// 接收父组件传过来的值
props: {
value: {
type: String,
default: "王五",
},
},
name: "",
methods: {
fn() {
this.$emit("input", (this.value = "李六"));
},
},
};
</script>
<style scoped></style>
?
3.默认情况下是传递过去自定义的值是value，自定义事件是input
? ? <friend v-model="name"> </friend>、
? ? 等价于
? ? <friend :value="name" @input="input"> </friend>
4.怎么去改自定义的值呢？
这个时候就需要用到model这个属性。
格式：
model: {
prop: "要改变的值",
event: "要改的事件",
},App.Vue
<template>
<div class="">
<friend v-model="name"> </friend>
<!-- <friend :value="name" @input="input"> </friend> -->
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
data() {
return {
name: "张三",
};
},
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
friend.Vue
<template>
<div class="">
{{ changvalue }}
<button @click="fn">点击修改父组件里面的值</button>
</div>
</template>
<script>
export default {
// 接收父组件传过来的值\
model: {
prop: "changvalue",
event: "input123",
},
props: {
changvalue: {
type: String,
},
},
name: "",
methods: {
fn() {
this.$emit("input123", (this.value = "李六"));
},
},
};
</script>
<style scoped></style>
六.? Sync的使用
1.理解
Sync也是传递值的一种方式，V-model只能进行一次这样的传值，而Sync可以使用多次。
V-model默认的是value和input，而Sync默认的是value和update，固定写法。
2.原理
// 正常父传子： <com1 :a="num" :b="num2"></com1> // 加上sync之后父传子： <com1 :a.sync="num" .b.sync="num2"></com1> // 它等价于 <com1 :a="num" @update:a="val=>num=val" :b="num2" @update:b="val=>num2=val"></com1>
相当于一个回调。
3.代码:
<template>
<div class="">
<friend :abc.sync="a" :nba.sync="b"> </friend>
<!-- <friend :value="name" @input="input"> </friend> -->
</div>
</template>
<script>
import friend from "./components/firend.vue";
export default {
data() {
return {
a: "123",
b: "王总",
};
},
components: {
friend,
},
name: "",
methods: {},
};
</script>
<style scoped></style>
friend.vue
<template>
<div class="">
{{ abc }}
{{ nba }}
<button @click="fn">把123改成456</button>
<button @click="fn1">把王总改成捧着玫瑰</button>
</div>
</template>
<script>
export default {
props: {
abc: {
type: Number,
default: 321,
},
nba: {
type: String,
},
},
name: "",
methods: {
fn() {
this.$emit("update:abc", 456);
},
fn1() {
this.$emit("update:nba", "鹏总");
},
},
};
</script>
<style scoped></style>
图示：
