Detaillierte Analyse der Anwendungsfälle globaler und lokaler Vue-Komponenten

Dieses Mal werde ich Ihnen eine detaillierte Analyse der Anwendungsfälle globaler und lokaler Komponenten von Vue geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung globaler Komponenten und lokaler Komponenten von Vue? Fall. Werfen wir einen Blick darauf.

main.jsEinige gängige Konfigurationen der Eintragsdatei Die hier verwendete pug-Vorlage .wrapper entspricht < class=wrapper>

—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: '<p>正常的组件模式</p>'
})
/* eslint-disable no-new */
// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

—public.vue Komponente ist eine definierte globale Komponente kann direkt in jeder Komponente verwendet werden. Es ist nicht erforderlich, es in den Vue-Instanzoptionskomponenten 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: 'HelloWor',
 // 全局组件里data属性必须是函数，这样才会独立，
 // 在组件改变状态的时候不会影响其他组件里公用的这个状态
 data () {
  return {
   name: '我是全局组件'
  }
 }
}
</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='msg', number='1')
 public
 router-link(to='/parent/children2') 第二个子组件
 router-view
</template>
<script>
import children from './children'
// children(:msg='msg', number='1')在组件里 也可以传递自定义的属性，但是是字符串类型，
export default {
 name: 'HelloWor',
 data () {
  return {
   // 通过prop将数据传递到子组件，并与v-model想对应的输入框相互绑定。
   msg: '这个是父组件的-prop-数据'
  }
 },
 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 nur im Rahmen von parent.vue verfügbar

<template lang="pug">
.wrapper
 slot(text="我是子组件的text") 我是子组件的内容
 .name {{ msg }} {{ number }}
</template>
<script>
export default {
 name: 'HelloWor',
 // 接受的时候是用props接受，数组的形式，里面是字符串的形式。
 // 也可以传入普通的字符串
 // 在子组件中，props接受到的状态当作vue的实例属性来使用
 props: [ 'msg', 'number' ]
}
</script>
<style scoped>
</style>

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den Diff-Algorithmus

Details zur ereignisspezifischen Verwendung von JS EventEmitter

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Anwendungsfälle globaler und lokaler Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!