Passing from child to parent: the child component calls the method of the parent component
Vue 3.0 no longer supports this, so the this.$emit() method is no longer supported.
The following is the new way of writing VUE3.0
Subassembly:
<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
name:'',
setup(prop,context){
const data = ref(0)
//在子组件的方法中调用父组件的方法
const handleClickChildBtn = () => {
context.emit('父组件方法名',data)
}
}
})
The second parameter of the setup() method is the vue context.
There is no obvious change in the parent component, just write according to the vue3 syntax.
Passing from father to son: through the first parameter of the setup(props) method,
export default defineComponent({
name:'',
props:['name']
setup(prop,context){
// 通过props 获取父组件传过来的值
let name = props.name
//增加监听
watch(
() => props.name,
(nval,oval) => {
//todo something
}
)
}
})