组件的封装铺垫

2023-10-30 15:37:40

前言:

身为小白的我, 在每次用到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>

图示：

组件的封装铺垫

上一篇：centerpoint模型说明


下一篇：Android Tombstone 分析