ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

组件的封装铺垫

2022-02-08 23:05:27  阅读：157  来源： 互联网

标签：Vue 封装 name 铺垫 default vue 组件 friend


前言:

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

图示：

标签：Vue,封装,name,铺垫,default,vue,组件,friend
来源： https://blog.csdn.net/qq_59076775/article/details/122830802

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有