第一种写法
父组件
{{user}}
import {defineComponent, ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
components:{
HelloWorld
},
setup(){
const name=ref('张三');
const user=ref('');
const change=(val)=>{//接收子组件的方法
user.value=val
}
return{
name,
user,
change
}
}
})
子组件
{{name}}
import{ defineComponent, } from 'vue'
export default defineComponent({
props:['name'],
setup(props, context){
context.emit('change','李四')//传值给父组件
}
})
第二种写法(setup语法糖)
父组件
{{user}}
import { ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const name=ref('张三');
const user=ref('');
const change=(val)=>{//接收子组件的方法
user.value=val
}
子组件
{{name}}
import{ defineEmits,defineProps, toRefs } from 'vue'
const props =defineProps({//接收父组件的值
name:String
})
const {name}=toRefs(props)
//传值给父组件
const emit=defineEmits(['change'])
emit('change','李四')
文章来源
发表评论