Nesting between nested components

Time:2021-10-8

Nesting mode

1. Gloablely

Once registered, the global component is used

a. Create a test.vue file in the SRC folder:

<template>
    <ul>
      <li v-for="name in names">{{ name }}</li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      names: ['Rachel', 'Ross', 'Emma']
    }
  }
}
</script>

<style>

</style>

b. Inmain.jsIn the file, register the test component globally, and add the following:

import Test from './Test.vue'

Vue.component('test', Test);

c. InApp.vueIn the file, it is the test component:

<template>
  <div>
    <p>{{ title }}</p>
    <!--  The location of the test component must be in the total div -- >
    <test></test>
  </div>
</template>

2. Locally

Only valid in the added file

a. Delete previous stepmain.jsContent added to the file

b. InApp.vueIn, the position of the placeholder remains unchanged, and the following contents are added:

<script>
//Import file
import Test from './Test.vue'

export default {
  components: {
    'test': Test,
  },

  data () {
    return {
      title: "My first Vue page"
    }
  }
}
</script>

Component CSS (scoped)

If you want the style to work only on its own components, just add scoped on the style tag:

<style scoped>
    h1 {
      color: green
    }
</style>

Props

Write the data needed for each page inapp.vueThe advantage of this is that if 10 pages share some data, it can achieve the effect of one modification and all updates without changing 10 pages

The following example shows the specific implementation method:
First, put the originalArticle.vueThe data of the page is moved toapp.vueIn the file
app.vueFile:

<template>
  <div>
    <!--  Corresponding article.vue component -- >
    <!--  Pass the data to the article.vue component -- >
    <my-article v-bind:family="family"></my-article>
  </div>
</template>

<script>
//Import the article.vue component file
import Article from './components/article.vue';

export default {
  Components: {// register components
    'my-article': Article,
  },

  data () {
    return {
    //Data to be used for article.vue page
      family: [
        {name: 'Rachel', hobby: 'skating', show: false},
        {name: 'Ross', hobby: 'codding', show: false},
        {name: 'Emma', hobby: 'watch cartoon', show: false},
      ]
    }
  }
}
</script>

Article.vueFile:

<template>
  <div>
    <b-list-group>
      <b-list-group-item v-for="people in family" v-on:click="people.show = !people.show">
        <h2>name: {{ people.name }}</h2>
        <h3 v-show="people.show">hobby: {{ people.hobby }}</h3>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
  export default {
    //Receive data from parent component through props
    props: {
      Family: {// data name
        Type: array, // verify the data type. It must be data, or an error will be reported
        Required: true // this data must be passed during verification, or an error will be reported
      }
    },

    data () {
      Return {// the original data here has been moved to the parent component

      }
    }
  }
</script>

In the above two files, the relationship diagram of data transfer:

Nesting between nested components

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]