Package bedding of components

Preface :

As a little white, I , In every use Element-ui,Vant When waiting for the component library, I often think about a problem , What are some values passed on for , What secrets are hidden behind it , Now let's explore , The mystery of component encapsulation .

One . What is a component ？

My understanding of components , When we use some public things , At this time, it will be encapsulated into a component , Use it , That is to avoid some of the same code .

Two . How to register a component

1. Conventional registration methods

Method : Import in the parent component , Then register to use .

Usage mode ： Use it as a label

2.APP.vue--------- Parent component

<template>
  <div class="">
    <firend />
  </div>
</template>

<script>
//  Import friend.vuei
import firend from "./components/firend.vue";
export default {
  components: {
    firend,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

Child components

<template>
  <div class="">
    <h1> muddle along ？</h1>
  </div>
</template>

<script>
export default {
  name: "",
  methods: {},
};
</script>

<style scoped></style>

Icon ：

3. Place of use

After you package this component , It can be used in any component in the future .

3、 ... and .Vue.use Use

I have also mentioned in previous articles Vue.use Use , Now let's review .

1. What to do

answer : be used for Certified components Use our door in Element-Ui I have also seen .

2. Specific use

There's a install Method , And provide a Vue Instantiate the object .

Vue.use Inside is an object . adopt Vue.use Will trigger inside install This method .

3. Used to register a component

(1) Create a index.js Store the components to be registered

import friend from "./firend.vue";

const zujian = {
  install(Vue) {
    Vue.component("friend", friend);
  },
};

export default zujian;

Pay attention to the component The first is string type .

(2) stay main.js Import from inside

import zujian1 from "./components/index";

Vue.use(zujian1);

（3） It can be used as a label in any component

---

    <friend >     </friend>

（4） stay install There are also things that can be done in the method , I understand the parameters that are passed on Vue It matters , It's equivalent to passing Vue The instance object of , Be similar to import Vue from "vue".

1.  The name of the filter : Vue.directive('dirName',{ // Instruction name .... })

2. stay Vue Prototype chain mounting method  : Vue.prototype.$atters=function(){  }

3.  filter ：Vue.filter(' The name of the command ',' Callback function ').

Four . Now let's introduce slots

1. understand , What is your understanding of slots , My understanding is that I want to reserve a place , I don't know what to put in this position . Equivalent to occupying space .

2. Several ways of slots .

Default slot

A named slot

Scope slot

3. The default slot is also called anonymous slot

APP.Vue

<template>
  <div class="">
    <friend>  The value to be passed to the sub component  </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>

Icon ：

 4. A named slot

Think of names , That is, a slot with a name . A name corresponds to a position

APP.vue

<template>
  <div class="">
    <friend #header>  To the head  </friend>
    <friend #main>  Pass it to the middle  </friend>
    <friend #footer>  To the tail </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>

Icon ：

 

 5. Scope slot ---------- Used to transfer data

It is similar to the process of a son passing on his father .

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>

Icon ：

 

5、 ... and .V-model Value transfer on components

1. Definition resolution , This is also the way components transfer values , Pass value from father to son , The child can also modify the value in the parent component .

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: " Zhang San ",
    };
  },
  components: {
    friend,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

firend.vue

<template>
  <div class="">
    {
   { value }}
    <button @click="fn"> Click to modify the value in the parent component </button>
  </div>
</template>

<script>
export default {
  //  Receive the value from the parent component 
  props: {
    value: {
      type: String,
      default: " Wang Wu ",
    },
  },
  name: "",
  methods: {
    fn() {
      this.$emit("input", (this.value = " Li Liu "));
    },
  },
};
</script>

<style scoped></style>

 

3. By default, the custom value passed in the past is value, Custom events are input

    <friend v-model="name"> </friend>、

    Equivalent to

    <friend :value="name" @input="input"> </friend>

4. How to change the custom value ？

It's needed at this time model This attribute .

Format ：

 model: {
    prop: " Value to change ",
    event: " Events to be changed ",
  },

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: " Zhang San ",
    };
  },
  components: {
    friend,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

friend.Vue

<template>
  <div class="">
    {
   { changvalue }}
    <button @click="fn"> Click to modify the value in the parent component </button>
  </div>
</template>

<script>
export default {
  //  Receive the value from the parent component \
  model: {
    prop: "changvalue",
    event: "input123",
  },
  props: {
    changvalue: {
      type: String,
    },
  },

  name: "",
  methods: {
    fn() {
      this.$emit("input123", (this.value = " Li Liu "));
    },
  },
};
</script>

<style scoped></style>

6、 ... and .  Sync Use

1. understand

Sync It is also a way to pass values ,V-model Such value transfer can only be carried out once , and Sync You can use it multiple times .

V-model The default is value and input, and Sync The default is value and update, Fixed writing .

2. principle

// Normal father to son ： <com1 :a="num" :b="num2"></com1> // add sync Then the father passed on to the son ： <com1 :a.sync="num" .b.sync="num2"></com1> // It is equivalent to <com1 :a="num" @update:a="val=>num=val" :b="num2" @update:b="val=>num2=val"></com1>

Equivalent to a callback .

3. Code :

<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: " Wang Zong ",
    };
  },
  components: {
    friend,
  },
  name: "",
  methods: {},
};
</script>

<style scoped></style>

friend.vue

<template>
  <div class="">
    {
   { abc }}
    {
   { nba }}
    <button @click="fn"> hold 123 Change to 456</button>
    <button @click="fn1"> Change president Wang into holding roses </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", " President Peng ");
    },
  },
};
</script>

<style scoped></style>

Icon ：