商城网站建设教学,wordpress 插件站,厦门 外贸商城网站建设,可口可乐营销策划方案MyButton.vue
这是子组件#xff0c;它是一个包含按钮的简单组件。它有一个按钮#xff0c;当按钮被点击时#xff0c;会触发 handleClick 方法。MyButton 组件中禁用了属性继承#xff0c;以避免多次触发点击事件。
!-- MyButton.vue --
template!-…MyButton.vue
这是子组件它是一个包含按钮的简单组件。它有一个按钮当按钮被点击时会触发 handleClick 方法。MyButton 组件中禁用了属性继承以避免多次触发点击事件。
!-- MyButton.vue --
template!-- 使用 div 包装 button并应用透传的属性 --div classbtn-wrapperbutton classbtn v-bind$attrs clickhandleClickslot/slot/button/div
/templatescript
export default {inheritAttrs: false, // 禁用属性继承,不然又多触发一次// inheritAttrs: true,methods: {handleClick(event) {// handleClick() {// this.$emit(click, event); 的作用是触发一个名为 click 的自定义事件// 父组件可以通过监听这个事件来执行相应的处理逻辑。在这里event 参数是原始的点击事件对象它会被传递给父组件中的 handleClick 方法。this.$emit(click, event);console.log(子组件中的点击事件触发);}}
}
/script
ParentComponent.vue
这是父组件它包含一个 MyButton 组件。在模板中通过 MyButton 标签使用了 MyButton 组件并传递了 class 和 click 事件。当 MyButton 组件中的按钮被点击时会触发父组件中的 handleClick 方法。
!-- ParentComponent.vue --
templatediv!-- 使用 MyButton 组件并传递 class 和 click 事件 --MyButton classlarge clickhandleClickClick me/MyButton/div
/templatescript
import MyButton from ./MyButton.vue;export default {components: {MyButton},methods: {handleClick(event) {console.log(父组件中的点击事件触发);console.log(原始事件对象:, event);}}
}
/script
