一、傳值
1.父傳子
<!--父組件-->
<template>
<child :msg="msg"></child>
</template>
<script>
import child from "./child.vue"
export default {
components:{child},
data(){
return{
msg:"hello"
}
}
}
</script>
<!--子組件-->
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
props:['msg']
}
</script>
2.子傳父
<!-- 子組件 -->
<template>
<div id="child">
<button @click="tryToParent">click</button>
</div>
</template>
<script>
export default {
name: 'child',
methods:{
tryToParent(){
this.$emit("toParent","我從子組件傳來")
}
}
}
</script>
<!-- 父組件 -->
<template>
<div id="parent">
<!-- 監聽child的toParent事件廣播,用fromChild進行處理 -->
<child @toParent="fromChild"></child>
</div>
</template>
<script>
import child from "./child.vue"
export default {
name: 'parent',
components:{child},
methods:{
fromChild(msg){
console.log(msg);
}
}
}
</script>
this.$on('toParent',msg=>{
console.log(msg);
})
二、父子組件方法互調
1.父調子
<template>
<child ref="child"></child>
</template>
<script>
methods:{
useMyChildAPI(){
this.$refs.child.fn1();
}
}
</script>
2.子調父
this.$parent.useMyChildAPI();