Detailed explanation of how to use global components and local components in Vue

This article mainly introduces the use of vue global components and local components in detail, which has certain reference value. Interested friends can refer to

vue global/local registration, and Some confusing components

Some common configurations of the main.js entry file. The public.vue defined on the entry file is a global component. The pug template .wrapper used here is equivalent to 93d1a5a1d4c83d992b9a5034354b6a2394b3e26ee717c64999d7867364b1b4a3

—main.jsFile

**main.js入口文件的内容**

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入公用组件的vue文件 他暴漏的是一个对象
import cpublic from './components/public'

Vue.config.productionTip = false

// 注册全局组件-要在vue的根事咧之前
// 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象
Vue.component('public', cpublic)
// 正常注册全局组件的时候，第二个参数应该是对象。
Vue.component('public1', {
 template: &#39;<p>正常的组件模式</p>&#39;
})
/* eslint-disable no-new */
// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧
new Vue({
 el: &#39;#app&#39;,
 router,
 template: &#39;<App/>&#39;,
 components: { App }
})

—public.vue Component is a global component defined in any It can be used directly in the component. There is no need to define it again on the vue instance option components, and there is no need to import the file path again.

**public.vue的组件内容**


<template lang="pug">
.wrapper
 slot(text="我是全局组件") {{name}}

</template>

<script>
export default {
 name: &#39;HelloWor&#39;,
 // 全局组件里data属性必须是函数，这样才会独立，
 // 在组件改变状态的时候不会影响其他组件里公用的这个状态
 data () {
  return {
   name: &#39;我是全局组件&#39;
  }
 }
}
</script>

<style scoped>

</style>

In the parent.vue component, public global components and other sub-components are used

parent.vue component

<template lang="pug">
.wrap
 .input-hd
  .title 名称:
  input.input(type="text",v-model="msg",placeholder="请输入正确的值",style="outline:none;")
 .content-detail
  .content-name 我是父组件的内容 
 children(:msg=&#39;msg&#39;, number=&#39;1&#39;)
 public
 router-link(to=&#39;/parent/children2&#39;) 第二个子组件
 router-view
</template>

<script>
import children from &#39;./children&#39;
// children(:msg=&#39;msg&#39;, number=&#39;1&#39;)在组件里 也可以传递自定义的属性，但是是字符串类型，

export default {
 name: &#39;HelloWor&#39;,
 data () {
  return {
   // 通过prop将数据传递到子组件，并与v-model想对应的输入框相互绑定。
   msg: &#39;这个是父组件的-prop-数据&#39;
  }
 },
 components: {
  children
 }
}
</script>

<style scoped>
.wrap {
}
.input-hd {
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 70px;
}
</style>

children.vue is a subcomponent of parent.vue, but it is only available in the scope of parent.vue

<template lang="pug">
.wrapper
 slot(text="我是子组件的text") 我是子组件的内容
 .name {{ msg }} {{ number }}
</template>

<script>
export default {
 name: &#39;HelloWor&#39;,
 // 接受的时候是用props接受，数组的形式，里面是字符串的形式。
 // 也可以传入普通的字符串
 // 在子组件中，props接受到的状态当作vue的实例属性来使用
 props: [ &#39;msg&#39;, &#39;number&#39; ]
}
</script>

<style scoped>

</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript implements a simple dynamic progress bar effect

Javascript implements operator overloading in detail

Sample code for Vue to implement internal component carousel switching effect

The above is the detailed content of Detailed explanation of how to use global components and local components in Vue. For more information, please follow other related articles on the PHP Chinese website!