Comment appliquer les composants globaux et locaux de vue dans le projet

Cette fois, je vais vous montrer comment appliquer les composants vue global et local dans le projet Quelles sont les précautions pour appliquer les composants vue global et local dans le projet Ce qui suit est un cas pratique, jetons un coup d'œil ? .

enregistrement global/local de vue et certains composants obscurcis

Quelques configurations courantes du fichier d'entrée main.js, définies publiquement sur le fichier d'entrée vue. est un composant global. Le modèle pug utilisé ici se présente sous la forme de

—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 Le composant est un composant global défini qui peut être utilisé directement dans n'importe quel composant. Il n'est pas nécessaire de le définir à nouveau sur les composants d'option d'instance de vue, et il n'y en a pas. vous devez réimporter le chemin du fichier.

**public.vue的组件内容**
<template lang="pug">
.wrapper
 slot(text="我是全局组件") {{name}}
</template>
<script>
export default {
 name: 'HelloWor',
 // 全局组件里data属性必须是函数，这样才会独立，
 // 在组件改变状态的时候不会影响其他组件里公用的这个状态
 data () {
  return {
   name: '我是全局组件'
  }
 }
}
</script>
<style scoped>
</style>

Dans le composant

parent.vue, des composants globaux publics et d'autres sous-composants sont utilisés

composant parent.vue

<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 est un sous-composant de parent.vue, mais il n'est disponible que dans le cadre de parent.vue

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore. Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

L'utilisation des paramètres Postman+token

Comment obtenir un contenu de recherche élevé dans le développement d'applets WeChat Fonction lumineuse

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!