快捷導(dǎo)航

vue全局組件與局部組件使用方法詳解

更新時(shí)間：2018年03月29日 15:53:01 作者：evendetail

這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue全局／局部注冊(cè)，以及一些混淆的組件

main.js入口文件的一些常用配置，在入口文件上定義的public.vue為全局組件，在這里用的是pug模版 .wraper 的形式相當(dāng)于<div class=wraper></div>

—main.js文件

**main.js入口文件的內(nèi)容**

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入公用組件的vue文件 他暴漏的是一個(gè)對(duì)象
import cpublic from './components/public'

Vue.config.productionTip = false

// 注冊(cè)全局組件-要在vue的根事咧之前
// 參數(shù) 1是標(biāo)簽名字-string 2是對(duì)象 引入外部vue文件就相當(dāng)與一個(gè)對(duì)象
Vue.component('public', cpublic)
// 正常注冊(cè)全局組件的時(shí)候，第二個(gè)參數(shù)應(yīng)該是對(duì)象。
Vue.component('public1', {
 template: '<div>正常的組件模式</div>'
})
/* eslint-disable no-new */
// 生成vue 的根實(shí)例;創(chuàng)建每個(gè)組件都會(huì)生成一個(gè)vue的事咧
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

—public.vue 組件為定義的全局組件在任何組件里都可以直接使用，不需要在vue實(shí)例選項(xiàng)components上在次定義，也不需要再次導(dǎo)入文件路徑。

**public.vue的組件內(nèi)容**


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

</template>

<script>
export default {
 name: 'HelloWor',
 // 全局組件里data屬性必須是函數(shù)，這樣才會(huì)獨(dú)立，
 // 在組件改變狀態(tài)的時(shí)候不會(huì)影響其他組件里公用的這個(gè)狀態(tài)
 data () {
  return {
   name: '我是全局組件'
  }
 }
}
</script>

<style scoped>

</style>

在parent.vue組件里，用到了public全局組件以及其他的子組件

parent.vue組件

<template lang="pug">
.wrap
 .input-hd
  .title 名稱(chēng):
  input.input(type="text",v-model="msg",placeholder="請(qǐng)輸入正確的值",style="outline:none;")
 .content-detail
  .content-name 我是父組件的內(nèi)容 
 children(:msg='msg', number='1')
 public
 router-link(to='/parent/children2') 第二個(gè)子組件
 router-view
</template>

<script>
import children from './children'
// children(:msg='msg', number='1')在組件里 也可以傳遞自定義的屬性，但是是字符串類(lèi)型，

export default {
 name: 'HelloWor',
 data () {
  return {
   // 通過(guò)prop將數(shù)據(jù)傳遞到子組件，并與v-model想對(duì)應(yīng)的輸入框相互綁定。
   msg: '這個(gè)是父組件的-prop-數(shù)據(jù)'
  }
 },
 components: {
  children
 }
}
</script>

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

children.vue是parent.vue的子組件，但是只在parent.vue作用域里可用

<template lang="pug">
.wrapper
 slot(text="我是子組件的text") 我是子組件的內(nèi)容
 .name {{ msg }} {{ number }}
</template>

<script>
export default {
 name: 'HelloWor',
 // 接受的時(shí)候是用props接受，數(shù)組的形式，里面是字符串的形式。
 // 也可以傳入普通的字符串
 // 在子組件中，props接受到的狀態(tài)當(dāng)作vue的實(shí)例屬性來(lái)使用
 props: [ 'msg', 'number' ]
}
</script>

<style scoped>

</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: