專業(yè)建站公司服務(wù)百度手機(jī)網(wǎng)頁版
定義組件
1. 在程序的 components 目錄下新建一個(gè)名為 Child.vue 的文件
2. 在文件內(nèi)鍵入如下代碼
<template><div>Child</div>
</template>
<script>
export default {name: 'Child'
}
</script>
新建的 Child .vue 文件即為我們定義的組件， 文件的位置一般放在 src 目錄下的 components 目錄下
在App.vue文件內(nèi)注冊(cè)Child.vue組件
1. 首先將組件引入到 App.vue 文件內(nèi)
import Child from './components/Child'注意：組件引入時(shí)不需要使用后綴名.vue
2. 在 App.vue 模塊內(nèi)添加一個(gè)名為 components 的屬性
3. 將組件注冊(cè)到 App.vue 文件內(nèi)
components: {????????Child}
4. 在 template 標(biāo)簽內(nèi)使用 Child 組件
< Child />
Vue組件之間的傳值
父子組件通信
如何定義父子組件？
將其他組件以import引入用自定義標(biāo)簽接收，在當(dāng)前組件中component里注冊(cè)該標(biāo)簽，頁面上可以直接用<自定義標(biāo)簽></自定義標(biāo)簽>樣子使用。當(dāng)前組件為父組件，被引入的組件為子組件。
父組件向子組件傳值
一般在子組件內(nèi)定義props來做接收 即：
props: [???? 'msg']
Child .vue 文件代碼變更如下：
定義好 props 之后我們可以在父組件傳遞 props 參數(shù)
<template><div><h2>子組件，嵌套到一個(gè)頁面的內(nèi)部使用</h2>接收到父組件傳遞的參數(shù)值：<b>{{msg}}</b><br>您的姓名是：{{name}},年齡：{{age}}<br></div>
</template>
<script>export default({name: 'Child',//定義屬性，其他頁面調(diào)用該組件時(shí)，可以通過屬性名稱返回值props:["msg","name","age"]})
</script>父組件代碼如下
<template><div><h2>父組件加載子組件</h2><hr><!--3.調(diào)用子組件,并且向子組件傳遞參數(shù)--><Child msg="父組件傳遞給子組件的參數(shù)" name="張三" age="20"/></div>
</template>
<script>
/*1.導(dǎo)入子組件
*/
import Child from '../../components/Child'
export default ({name: 'Parent',//2.注冊(cè)子組件components:{Child}
})
</script>
子組件向父組件傳值
子組件通過調(diào)用 this.$emit() 方法向父組件傳值基本語法：this.$emit('func', param)func: 為父組件中綁定的函數(shù)名，可自定義param: 為要傳遞的參數(shù)<Child @func=”funcHandle”>其中 funcHandle 需在父組件中定義好相應(yīng)的方法，該方法接收一個(gè)或多個(gè)參數(shù)funcHandle(val) {??? this.msg = val}
子組件修改代碼如下：
this.$emit('parentFunc',this.title);
父組件修改代碼如下：
<Child msg="父組件傳遞給子組件的參數(shù)" name="張三" age="20" @parentFunc="receFunc"/>
methods:{
? ? ? ? receFunc(val){
? ? ? ? ? ? this.title = val
? ? ? ? }
? ? }
Child.vue完整代碼
<template><div><h2>子組件，嵌套到一個(gè)頁面的內(nèi)部使用</h2>接收到父組件傳遞的參數(shù)值：<b>{{msg}}</b><br>您的姓名是：{{name}},年齡：{{age}}<br>標(biāo)題：<input type="text" v-model="title"><input type="button" @click="test()" value="返回值給父組件"></div>
</template>
<script>export default({name: 'Child',//定義屬性，其他頁面調(diào)用該組件時(shí)，可以通過屬性名稱返回值props:["msg","name","age"],data(){return {title:''}},methods:{test(){//調(diào)用父組件的函數(shù)，同時(shí)傳回參數(shù)//parentFunc父組件的函數(shù)// alert(this.title)this.$emit('parentFunc',this.title);}}})
</script>parent.vue完整代碼
<template><div><h2>父組件加載子組件</h2><hr><!--3.調(diào)用子組件,并且向子組件傳遞參數(shù)--><Child msg="父組件傳遞給子組件的參數(shù)" name="張三" age="20" @parentFunc="receFunc"/>子組件返回的值是：{{title}}<h3 align="left">子組件傳參給父組件的實(shí)現(xiàn)步驟</h3><hr><p align="left">1.在parent.vue文件定義接受函數(shù):receFunc<br>2.定義調(diào)用組件時(shí)的事件的名稱@parentFunc，該名稱自定義<br>3.在parent.vue文件調(diào)用子組件:<Child msg="父組件傳遞給子組件的參數(shù)" name="張三" age="20" @parentFunc="receFunc"/><br>4.在child.vue文件定義test函數(shù),利用$emit方法調(diào)用函數(shù):this.$emit('parentFunc',this.title);返回子組件的值<br>5.parentFun名稱為自定義，主要parent.vue，child.vue兩邊使用的名稱一致即可</p></div>
</template>
<script>
/*1.導(dǎo)入子組件
*/
import Child from '../../components/Child'
export default ({name: 'Parent',//2.注冊(cè)子組件components:{Child},data(){return{title:''}},methods:{receFunc(val){this.title = val}}})
</script>
本人從事軟件項(xiàng)目開發(fā)20多年，2005年開始從事Java工程師系列課程的教學(xué)工作，錄制50多門精品視頻課程，包含java基礎(chǔ)，jspweb開發(fā)，SSH,SSM，SpringBoot，SpringCloud,人工智能，在線支付等眾多商業(yè)項(xiàng)目，每門課程都包含有項(xiàng)目實(shí)戰(zhàn)，上課PPT，及完整的源代碼下載，有興趣的朋友可以看看我的在線課堂
講師課堂鏈接：https://edu.csdn.net/lecturer/893