Component communication, slot slot, encapsulated components, UI component library

<template>
  <div class="box">
    <!-- use son -->
    <!-- pass parameters to son use: msg -->
    <!-- Define attributes in the parent and pass them to the subset -->
    <!-- We need to get the attributes defined by the parent in the subset -->
    <itemson
    @spendata='fn'
      v-for="(v,i) in dataList"
      :key="i"
      :imgActive="v.imgActive"
      :imgSrc="v.imgSrc"
      :title="v.title"
      :url="v.url"
    ></itemson>
  </div>
</template>

<script>
// Import the son's module
import itemson from "./components/Itemson.vue";
export default {
  // register son
  components: {
    itemson
  },
  data() {
    return {
      // Then define that the returned array is empty
      dataList: [
        {
          imgActive: require("./assets/imgs/api01-c.svg"),
          imgSrc: require("./assets/imgs/api01.svg"),
          title: "Life Services",
          url: "https://www.baidu.com"
        },
        {
          imgActive: require("./assets/imgs/api02-c.svg"),
          imgSrc: require("./assets/imgs/api02.svg"),
          title: "Social Services",
          url: "https://www.taobao.com"
        },
        {
          imgActive: require("./assets/imgs/api03-c.svg"),
          imgSrc: require("./assets/imgs/api03.svg"),
          title: "Pension Services",
          url: "https://www.jd.com"
        },
        {
          imgActive: require("./assets/imgs/api04-c.svg"),
          imgSrc: require("./assets/imgs/api04.svg"),
          title: "Medical Services",
          url: "https://www.tianmao.com"
        },
        {
          imgActive: require("./assets/imgs/api05-c.svg"),
          imgSrc: require("./assets/imgs/api05.svg"),
          title: "After-sales Service",
          url: "https://www.baihe.com"
        },
        {
          imgActive: require("./assets/imgs/api06-c.svg"),
          imgSrc: require("./assets/imgs/api06.svg"),
          title: "Travel Service",
          url: "https://www.4399.com"
        },
        {
          imgActive: require("./assets/imgs/api07-c.svg"),
          imgSrc: require("./assets/imgs/api07.svg"),
          title: "Weather Service",
          url: "https://www.7k7k.com"
        }
    
      ]
    };
  },
  methods: {
   fn(obj){
    console. log(obj);
    location.href=obj.url
   }
}
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
}
</style>

The above is the content of the parent page
Below is the content of the subpage

<template>
  <div>
    <!-- set son page -->
    <div class="itemson" @mouseenter="isActive = true" @mouseleave="isActive= false" @click="spendata">
      <img :src="imgActive" alt v-if="isActive" />
      <img :src="imgSrc" alt v-else />
      <p>{<!-- -->{title}}</p>
    </div>

    <!-- then use it -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
     
    };
  },
  // The son receives the parameters passed by the parent with propos
  props: {
    imgActive: {
      required: true,
      type: String,
      default: ""
    },
    imgSrc: {
      required: true,
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    }
  },
  methods: {
    spenddata() {
      this. $emit("spendata", {
        url: this.url,
        imgSrc: this.imgSrc,
        title: this.title
      });
    }
  }
};
</script>

<style lang="less" scoped>
.itemson {
  width: 220px;
  height: 138px;
  box-shadow: 1px 4px 8px 0 rgba(18, 113, 239, 0.6);
  margin: 0px 20px 20px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   &:hover {
    background: #1271ef;
    color: #fff;
  }
}
</style>

1.0 Component Communication

In order to achieve interaction, components are implemented through data transfer, which is called component communication

Use of custom components:

  • Import components

  • register component

  • use components

1.1 Component communication type:

  • Parent-to-child [key]: Define the parameters that need to be passed on the sub-component tag of the parent page, and receive parameters through the configuration option props on the sub-component page. The method of use is the same as the data in data

<template>
    <son parameter 1="expression" :parameter 2="msg12"></son>
</template>
<script>

import Son from ‘xx/Son.vue’ // import components

export default{
// register component
components: { Son },
data(){
return {
msg:’xxx’
}
}
}

?
?
# Subcomponent receives parameters

Note: When sending pictures, remember to wrap them with require



?

  • Passing from child to parent [Keywords]: Vue is a one-way data flow, and child components cannot directly modify the data passed in by the parent component, but can only modify data through triggering events;

    Send: Pass the parameter to the parent component through this.$emit(‘custom event name‘, parameter);

    Receiving: The parent component page binds custom event name on the label of the child component to receive incoming parameters;

#son.vue
<template>
    <div>
        ...content
        <button @click="handling function"> modify </button>
?
    </div>
</template>
<script>
export default{
    ...
    // method
    methods: {
        handler function () {
            // Trigger a custom event through $emit, and carry the corresponding parameters to the parent component
            this.$emit('custom event name', parameter 1, parameter 2...)
        }
    }
}
?
</script>
?
?
#parent component
<template>
    <son parameter 1="expression" :parameter 2="msg12" @custom event name="processing function"></son>
</template>
<script>
import Son from 'xx/Son.vue' // import components
    
export default{
    // register component
    components: { Son },
    data(){
        return {
            msg:'xxx'
        }
    },
    // method
    methods: {
        Handling function (parameter 1, parameter 2) {
            // Modify data after processing logic
            this.msg = parameter 1
        }
    }
}
</script>

  • Random transmission (central event bus bus) [understanding]: Find a Vue instance as an intermediary, and transmit and receive data through this intermediary

    Features: It is very simple to use, the disadvantage is that it is messy, and the maintenance cost is extremely high

1. Create an intermediary -- create an instance of vue and mount it to the prototype of Vue
Vue.prototype.$bus = new Vue()
2. Transfer information
this.$bus.$emit('custom event name', parameter)
3. Receive information
created(){
    this.$bus.$on('custom event name', (parameter) =>{ // process data })
}

Determination of parent-child relationship: If you introduce, register, and use on my page, then I am your father

  • Dependency injection [not to talk about]: the ancestor component injects a certain property, and the descendant component depends on this variable

  • vuex state management library

  • slot : he passes the element

  • Routing parameters: Router

Basic use of 2.0 slot 【Master】

Dig a hole in the child component and fill the hole when the parent component uses it. This is the role of the slot

2.1 Types of slots

  • anonymous slot

#Subcomponent son.vue
<template>
    <div>
        <slot></slot>
    </div>
</template>
?
#parent component father.vue
<template>
    <div>
        <son>
            Write what you want to write including element tags
        </son>
    </div>
</template>

  • named slot

#Subcomponent son.vue
<template>
    <div>
        <slot name='slot name 1'></slot>
        <slot name='slot name 2'></slot>
    </div>
</template>
?
#parent component father.vue
<template>
    <div>
        <son>
            <Write what you want to write including the element tag slot="slot name 2" />
            <Write what you want to write including the element tag slot="slot name 1" />
        </son>
    </div>
</template>

  • Scope slot (equivalent to passing an array of child components to the parent component)

#Subcomponent son.vue
<template>
    <div>
        <slot name='slot name 1': attribute 1 that needs to be passed out = "attribute value 1": attribute 2 that needs to be passed out = "attribute value 2" ></slot>
        <slot: Attribute 1 that needs to be passed out = "attribute value 1" : attribute 2 that needs to be passed out = "attribute value 2"></slot>
    </div>
</template>
?
#parent component father.vue
<template>
    <div>
        <son>
            # Named slot
            <Write what you want to write including the element tag slot="slot name 1" slot-scope="scoped">
                {<!-- -->{ scoped }}
            </Write what you want to write including element tags>
            # Anonymous slot
            <Write what you want to write including the element tag slot-scope="scoped" >
                {<!-- -->{ scoped }}
            </Write what you want to write including element tags>
            
        </son>
    </div>
</template>

The use of the 3.0 component library【Master】

Go to the corresponding official website to find suitable components, C + V

  • According to the element you choose, view the corresponding properties, methods, and event documents

Element UI (Element – The world’s most popular Vue UI framework)

1. Download
npm i element-ui -S
or
yarn add element-ui -S
?
2. Introduction and use (introduced in main.js)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
?
Vue. use(ElementUI);

Vant UI (Vant 2 – Mobile UI Components built on Vue)

1. Download
npm i vant@latest-v2 -S
or
yarn add vant@latest-v2 -S
?
2. Introduction and use (introduced in main.js)
import Vant from 'vant'; // js
import 'vant/lib/index.css'; // css
?
Vue. use(Vant);