目錄
前言
父組件傳子組件 ---- props
給要傳遞數(shù)據(jù)的子組件綁定要傳過去的屬性及屬性值
在子組件中使用props配置項接收
props配置項
子組件傳父組件 ---- 組件的自定義事件
子組件向父組件傳遞數(shù)據(jù)
通過代碼來綁定自定義事件
前言
本文將介紹在Vue中父子組件如何進行通信
父組件傳子組件 ---- props
這里先介紹父組件如何向子組件傳遞數(shù)據(jù)
首先創(chuàng)建腳手架Cli
創(chuàng)建父組件App.vue和子組件SonX.vue
注冊好子組件并在父組件中使用
子組件
導(dǎo)出子組件
<template>
<div>
<h1>我是兒子</h1>
</div>
</template>
<script>
export default {
name:'SonX'
}
</script>
<style>
</style>父組件
導(dǎo)入子組件并注冊使用
<template>
<div id="app">
<SonX></SonX>
</div>
</template>
<script>
import SonX from './components/SonX.vue'
export default {
name: 'App',
components: {
SonX
}
}
</script>
<style>
</style>給要傳遞數(shù)據(jù)的子組件綁定要傳過去的屬性及屬性值
僅在子組件上添加屬性
<template> <div id="app"> <SonX name="zs" age="20" gender="男"></SonX> </div> </template>
在子組件中使用props配置項接收
<template> <div> <h1>我是兒子</h1> <h2>{{name}}</h2> <h2>{{age}}</h2> <h2>{{gender}}</h2> </div> </template> <script> export default { name:'SonX', props:['name','age','gender'] } </script> <style> </style>效果
成功渲染到頁面上
props配置項
注意：不要直接修改props中的數(shù)據(jù)
簡單接收，直接采用數(shù)組形式接收:
props:['name','age','gender']
添加類型限制：
props:{
? ? ? ? name:String,
? ? ? ? age:Number,
? ? ? ? gender:String
}
當添加了類型限制后，如果父組件傳過去屬性值不符合就會報錯
如下，父組件傳過去的age='20'是字符串，并不是數(shù)字，所以就報錯了
添加類型限制，并且還可以添加默認值，還可以添加必要性:
props:{
? ? ? ? name:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? required:true
????????????????????????},
? ? ? ? age:{
? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? default:20
????????????????????????},
? ? ? ? gender:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? required:true
????????????????????????}
}
添加了默認值和必要性，當添加必要性時，如果沒有傳遞就會報錯，添加了默認值，如果沒有傳遞該屬性，子組件就會使用默認值
子組件傳父組件 ---- 組件的自定義事件
在父組件中
先在子組件上自定義一個事件
v-on:事件名='函數(shù)' 或 @事件名="函數(shù)"
<template> <div id="app"> <SonX name="zs" age="20" gender="男" v-on:event="think"></SonX> </div> </template> <script> import SonX from './components/SonX.vue' export default { name: 'App', components: { SonX }, methods:{ think(){ console.log('傳遞成功'); } } } </script> <style> </style>
在子組件中
用以下方法進行對自定義事件的執(zhí)行
this.$emit('自定義的事件名')
<template> <div> <h1>我是兒子</h1> <h2>{{name}}</h2> <h2>{{age}}</h2> <h2>{{gender}}</h2> <button @click="think2">測試</button> </div> </template> <script> export default { name:'SonX', props:['name','age','gender'], methods:{ think2(){ this.$emit('event') } } } </script>
子組件向父組件傳遞數(shù)據(jù)
子組件中
this.$emit('自定義的事件名'，傳遞的參數(shù))
<template> <div> <h1>我是兒子</h1> <button @click="think2">測試</button> </div> </template> <script> export default { name:'SonX', data(){ return { name:'ls', age:30, gender:'女' } }, methods:{ think2(){ this.$emit('event',this.name,this.age,this.gender) } } } </script>
父組件中
對子組件中傳過來的數(shù)據(jù)進行接收
<template> <div id="app"> <SonX name="zs" age="20" gender="男" v-on:event="think"></SonX> </div> </template> <script> import SonX from './components/SonX.vue' export default { name: 'App', components: { SonX }, methods:{ think(name,age,gender){ console.log(name,age,gender); } } } </script>成功接收并打印出來
通過代碼來綁定自定義事件
先通過ref獲取子組件
ref='組件名'
在mounted鉤子函數(shù)中
this.$refs.ref獲取到的組件名.$on('自定義事件名'，回調(diào)函數(shù))
<template> <div id="app"> <SonX ref="SonX"></SonX> </div> </template> <script> import SonX from './components/SonX.vue' export default { name: 'App', mounted(){ this.$refs.SonX.$on('event',this.think) }, components: { SonX }, methods:{ think(name,age,gender){ console.log(name,age,gender); } } } </script>在頁面上渲染文章來源：http://www.zghlxwxcb.cn/news/detail-755598.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-755598.html
到了這里，關(guān)于Web前端 ---- 【Vue】（組件）父子組件之間的通信一文帶你了解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
