Ausführliche Erklärung zur Verwendung globaler und lokaler Komponenten in Vue

In diesem Artikel wird hauptsächlich die Verwendung globaler und lokaler Vue-Komponenten ausführlich vorgestellt. Interessierte Freunde können sich auf

globale/lokale Vue-Registrierung und einige verschleierte Komponenten

Einige gängige Konfigurationen der main.js-Eintragsdatei ist eine globale Komponente. Die hier verwendete Pug-Vorlage .wrapper entspricht 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 Komponente ist eine globale Komponente, die in jeder definiert ist. Sie kann direkt in der Komponente verwendet werden. Es ist nicht erforderlich, es in den Optionskomponenten der Vue-Instanz erneut zu definieren, und es ist nicht erforderlich, den Dateipfad erneut zu importieren.

**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 der Komponente

parent.vue werden öffentliche globale Komponenten und andere Unterkomponenten verwendet

parent.vue-Komponente

<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 ist eine Unterkomponente von parent.vue, aber sie ist nur im parent.vue-Bereich verfügbar

<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>

Das oben Gesagte habe ich für alle zusammengestellt in der Zukunft.

Verwandte Artikel:

JavaScript implementiert einen einfachen dynamischen Fortschrittsbalkeneffekt

Detaillierte Erläuterung der Javascript-Implementierung der Operatorüberladung

Vues Beispielcode zur Implementierung des internen Komponentenkarussell-Umschalteffekts

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung globaler und lokaler Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!