Vue – how to introduce other components into components

Time:2020-9-29

Three steps of using components
1: Import components
Import a custom component name from “component path”;
Note that even if the current directory is the same as the component path, it’s best to add “. Otherwise, an error will be reported
2: Register components
The use of components requires registration. The registration method is

export default {
  components: {
    The component name and // registered components are written under the components object.
  }
}

3: Use components (write to the corresponding HTML location)
< component name > < / component name > / / the component name comes from the component name when the component was registered

<template>
  <div class="main">
    <! -- using components -- >
    <! -- here it is index.vue Is the parent component, top, middle, bottom is the child component -- >
    <! -- top and middle are brother components -- >
    <top></top>
    <middle></middle>
    <bottom></bottom>
  </div>
</template>
<script>
//Import components: top, middle and bottom are Vue components that need to be created separately, which are not created here
import top from "./top.vue";
import middle from "./middle.vue";
import bottom from "./bottom.vue";

export default {
  //Component registration
  components: {
    Top, // equivalent to top:top
    middle,
    bottom
  }
};
</script>
<style>
.main {
  width: 100%;
}
.main img {
  width: 100%;
}
</style>

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’39.107.86.223′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]