Explication détaillée de la façon d'utiliser les composants globaux et les composants locaux dans Vue-js tutoriel-php.cn

Explication détaillée de la façon d'utiliser les composants globaux et les composants locaux dans Vue

亚连

Libérer： 2018-05-28 11:50:30

original

1831 Les gens l'ont consulté

Cet article présente principalement en détail l'utilisation des composants globaux et locaux de vue, qui ont une certaine valeur de référence. Les amis intéressés peuvent se référer à

l'enregistrement global/local de vue et à certains composants obscurcis

<.>Quelques configurations courantes du fichier d'entrée main.js. Le public.vue défini sur le fichier d'entrée est un composant global. Le modèle pug .wrapper utilisé ici est équivalent à

<.>

—

main.js

File

—

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

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

Vue.config.productionTip = false

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

Copier après la connexion

public.vue

est un composant global défini. Il 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 de l'instance de vue, et il n'est pas nécessaire d'importer à nouveau le chemin du fichier.

Dans le composant

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

Copier après la connexion

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=&#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>

Copier après la connexion

children.vue

est un sous-composant de parent.vue, mais il n'est disponible que dans le cadre de parent.vue

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère cela sera utile à tout le monde à l’avenir. Utile.

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

Copier après la connexion