子传父:子组件调用父组件方法
vue3.0不再支持this,所以this.$emit()方法不在被支持。
以下为VUE3.0新写法
子组件:
<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
name:'',
setup(prop,context){
const data = ref(0)
//在子组件的方法中调用父组件的方法
const handleClickChildBtn = () => {
context.emit('父组件方法名',data)
}
}
})
setup()方法的第二个参数为 vue上下文环境。
父组件无明显变化,按照vue3语法书写即可。
父传子:通过setup(props)方法的第一个参数,
export default defineComponent({
name:'',
props:['name']
setup(prop,context){
// 通过props 获取父组件传过来的值
let name = props.name
//增加监听
watch(
() => props.name,
(nval,oval) => {
//todo something
}
)
}
})