Vue – how to introduce other components into components


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

  <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 -- >
//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
.main {
  width: 100%;
.main img {
  width: 100%;

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=’′, 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()) […]