Shulou(Shulou.com)06/01 Report--

Editor to share with you how vue uses scaffolding vue-cli to create and introduce custom components. I hope you will get something after reading this article. Let's discuss it together.

First, create and introduce a component 1. Create a component

All components in vue-cli are stored under the components folder, so create a custom component called First.vue under the components folder:

{{msg}} / 1, export means export. Use export default export export default {/ / name in custom components to set aliases, but do not set them. It is recommended that the name of the component is the same as that of the component: "First", data () {return {msg: "First Vue"}} 2, and reference the First.vue component in the App.vue component.

1. Use import to import custom tags in the tags:

/ / 1. Import the custom component First, that is, the name value import First from ". / components/First" set in the First.vue component.

2. Add custom components to export:

/ / 2. Add custom component components: {First}

3. Introduce custom components into the tag:

The complete code is as follows:

/ / 1. Import the custom component First, that is, the name value set in the First.vue component import First from ". / components/First" export default {name: 'App', / / 2, add the custom component components: {First}} # app {font-family:' Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px }

Effect:

Second, introduce nested components

In the above example, only a single component is introduced in App.vue, so how do you introduce nested components? That is, the custom component is referenced in the First.vue component, so how can it be introduced in the App.vue component?

1. Define the Second.vue custom component first: {{secondMsg}} export default {/ / name means to set the alias, but not to set it. It is recommended that the name of the component is the same as name: "Second", data () {return {secondMsg: "Second vue"}} 2, and reference the Second.vue component in the First.vue component

Referencing Second.vue components in First.vue is the same as introducing First.vue components in App.vue. The complete code is as follows:

{{msg}} / 1. Import Second.vueimport Second from'. / Second' using import / / export means to export export default {/ / name means to set aliases, but it can not be set. It is recommended that the name of the component is the same as that of the component: "First", data () {return {msg: "First Vue"}}, / / 2, adding custom component components components: {Second} 3, introducing nested components in App.vue

With the introduction of the Second.vue component in First.vue, you can think of the First.vue component as a component, so the code is the same when introduced in App.vue:

/ / 1. Import the custom component First, that is, the name value set in the First.vue component import First from ". / components/First" export default {name: 'App', / / 2, add the custom component components: {First}} # app {font-family:' Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px } 4. Effect

After reading this article, I believe you have a certain understanding of "how vue uses scaffolding vue-cli to create and introduce custom components". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.