三個(gè)技能，父組件 —> 子組件傳值（props）、子組件 —> 父組件傳值（emit用來(lái)使這個(gè)獨(dú)立的組件通過(guò)一些邏輯來(lái)融入其他組件中。舉個(gè)具體點(diǎn)的例子，假如你要做一輛車(chē)，車(chē)輪是要封裝的一個(gè)獨(dú)立組件，props指的就是根據(jù)整個(gè)車(chē)的外形你可以給輪子設(shè)置一些你想要的且符合車(chē)風(fēng)格的花紋，圖案等；而$emit的作用則是讓這些輪子能夠和整輛車(chē)完美契合的運(yùn)作起來(lái)。

（1）使用props可以實(shí)現(xiàn)父子組件之間的傳值（2）使用this.$emit()可是實(shí)現(xiàn)子組件調(diào)用父組件的方法

一.在commponents文件創(chuàng)建組件文件

二.組件代碼(寫(xiě)法)

index.vue

<template> <div class='cusdealed'> <div v-if='showStatus==1'> <div class='submitRes'><img src='http://www.intensediesel.com/common/img/repectSubmit.png' alt=''> </div> <div class='submitTip tipwidth'>該單據(jù)已經(jīng)提交過(guò)了，不用重復(fù)提交哦！</div> </div> <div v-if='showStatus==2'> <div class='submitRes'><img src='http://www.intensediesel.com/common/img/invalid.png' alt=''> </div> <div class='submitTip'>單據(jù)已失效，不能掃單入庫(kù)！</div> </div> <div v-if='showStatus==3'> <div class='submitRes'><img src='http://www.intensediesel.com/common/img/invalid.png' alt=''> </div> <div class='submitTip'>找不到該單據(jù)，不能掃單入庫(kù)！</div> </div> </div></template><script type='text/javascript' src='http://www.intensediesel.com/bcjs/logic.js'></script><style lang='less' scoped> @import ’./style.css’;</style>style.less//樣式文件@import ’../../common/less/px2rem.less’;@import ’../../common/less/base.less’;.cusdealed { .submited { .submitRes { .px2rem(150); width: @px2rem; height: @px2rem; } .submitRes { .px2rem(227); margin: @px2rem auto 0; .resImg { width: 100%; height: 100%; display: block; } } .submitTip { .px2rem(58); // height: @px2rem; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(51, 51, 51, 1); line-height: @px2rem; } .submitTip{ .px2rem(32); font-size: @px2rem; } .tipwidth{ .px2rem(384); width: @px2rem; } .submitTip{ .px2rem(50); margin: @px2rem auto 0; } }}logic.js//邏輯文件import { Spinner } from ’vux’export default { name: ’cusDealing’, data() { return { showStatus:1 } }, components: { Spinner, }, props: { // showStatus: Number }, computed: { }, watch: { showStatus(val) { console.log(val, ’showStatus---’) return val; } }, methods: { }, mounted() { }}

三.用法

引入組件

頁(yè)面使用

html:

<!-- 處理完彈窗 --> <div : v-if='dealStatus==2'> <div class='dealedContent'> <Cusdealed :showStatus='showStatus'></Cusdealed> <div @click='Iknow'>我知道了</div> </div> </div>

js:

效果

好了，看下正文。下面結(jié)合日常生活給大家講下道理。

在網(wǎng)上經(jīng)?？吹接信笥言趩?wèn)自己能不能寫(xiě)vue組件 如果可以怎么應(yīng)用到自己的項(xiàng)目之中呢！我覺(jué)得吧這個(gè)事兒就和用煮大米飯是一個(gè)道理的

1. 首先作大米飯我們得有米吧 要不 巧婦難為無(wú)米之炊啊 因此先買(mǎi)好我們自己的大米也就是創(chuàng)建組件文件，這里我假設(shè)要?jiǎng)?chuàng)建一個(gè)自己loading效果組件 那么我們就先創(chuàng)建 loading.vue 里面的代碼根據(jù)vue template相關(guān)規(guī)則寫(xiě)就可以 這里就不在贅述了 我只寫(xiě)一個(gè)最最簡(jiǎn)單的例子

2.ok了 米就這么愉快的買(mǎi)好了 那么有了米我們現(xiàn)在只需要把他放在鍋里！那么這個(gè)鍋是誰(shuí)呢！好吧我們自己來(lái)背這個(gè)鍋，我們創(chuàng)建一個(gè)相關(guān)的.js文件 通常組件都是一個(gè)功能自己一個(gè)文件夾那么每個(gè)組件都應(yīng)該有自己獨(dú)立的調(diào)用文件（一盆大米一個(gè)鍋）那么為了統(tǒng)一我們可以都叫做index.js當(dāng)然了這個(gè)名字你可以隨便起 只有以后你在后續(xù)調(diào)用時(shí)候更換相關(guān)名字即可！重點(diǎn)來(lái)了 這個(gè)鍋是怎么造的呢！話不多說(shuō)直接上圖

那么上面三個(gè)這么違和的框是干什么的么：紅色框框：我靠這還用問(wèn)嗎 你調(diào)用那個(gè)文件你得告訴人間啊 這里當(dāng)然要調(diào)用剛才我們自己創(chuàng)建的loading.vue文件。 黃色框框：我靠這個(gè)黃色的框框可以說(shuō)是本次本文章中重點(diǎn)中的重點(diǎn) 為什么這么說(shuō)呢 我們要使用自己的組件就要導(dǎo)出這個(gè)組件 而這個(gè)黃色框框中的代碼就是導(dǎo)出自己組件的相應(yīng)配置 其中那個(gè)非常猥瑣的浪線則是本例子的”命根子“ 這個(gè)命名就是你在其他文件中調(diào)用這個(gè)組件（這里是loading組件）的名字 在這個(gè)例子中我們?cè)谡{(diào)用組件時(shí)候就可以寫(xiě)成<Loading></Loading>。白色框框：這個(gè)沒(méi)什么好說(shuō)的 相當(dāng)于導(dǎo)出這個(gè)組件 在main中好接受！

3.原材料大米也有了 飯鍋也有了 現(xiàn)在是萬(wàn)事俱備只欠東風(fēng) 那我們第三部就是一個(gè)字”煮“ 兩字：”開(kāi)火“ 這里就是我們要把我們這個(gè)自己創(chuàng)建的組件應(yīng)用到我們的頁(yè)面之中 詳情請(qǐng)看下圖

黃色框框部分就是在主文件main.js中 引入剛才定義的組件 和 應(yīng)用 這個(gè)組件了！

最后的最后你可以在任何想用這個(gè)組件的地方插入<Loading></Loading>了 組件相應(yīng)的樣式和js代碼可以直接寫(xiě)在第一步中的文件之中！就這樣一個(gè)自己創(chuàng)建的組件就這么愉快的應(yīng)用啦！

（備注：本實(shí)例家里在用vue init webpack-simple xxx的基礎(chǔ)之上，第一次寫(xiě)文章很多不周全之處 還請(qǐng)各位客官諒解 ）

總結(jié)

到此這篇關(guān)于vue 自定義組件的寫(xiě)法與用法詳解 的文章就介紹到這了,更多相關(guān)vue 自定義組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！