vue3+ts组件通信

1、父组件向组件传参

父组件代码

vue3+ts组件通信_第1张图片子组件代码

vue3+ts组件通信_第2张图片

2、子组件向父组件传参

组件间代码

vue3+ts组件通信_第3张图片父组件代码

vue3+ts组件通信_第4张图片

3、如果eslint报错,需在.eslintrc.js中添加一行代码

vue3+ts组件通信_第5张图片

4、通过父组件通过 ref 获取子组件的属性或者方法

父组件代码

vue3+ts组件通信_第6张图片子组件代码,必须用defineExpose暴露出去

vue3+ts组件通信_第7张图片

5、孙子组件provide和inject

父组件代码

vue3+ts组件通信_第8张图片孙子组件代码

vue3+ts组件通信_第9张图片

你可能感兴趣的:(vue3+ts,vue.js,前端,javascript)