前端开发笔记 | Vue 3 子组件和父组件交互

在上一篇文章《前端开发笔记 | React Hooks子组件和父组件交互》里面我介绍了在使用React Hooks的开发方式下,子组件和父组件的交互,那现在就来介绍下Vue 3中的子组件和父组件的交互。

父组件调用子组件

子组件定义文件SubItem.vue




父组件调用子组件父组件调用子组件




这就是简单的在父组件中调用子组件,由父组件控制子组件的按钮的展示和点击事件。

子组件改变父组件

父组件定义




子组件文件SubItem.vue中刷新父组件按钮文案




实际效果:点击子组件中“改变父组件按钮”,父组件中的按钮#main-btn的文案从“测试”变成了“改变按钮文案“,同时在Console中输出”改变父组件按钮“。

这就是使用Vue 3开发下,子组件和父组件的交互,Vue 3.0开发代码很简洁,目前在国内也非常流行。

你可能感兴趣的:(vue.js,笔记,javascript)