企业门户网站需求,wordpress密码保护文章,题库网站开发,怎么做和京东一样网站小计#xff1a; 开发中遇到子组件需要调用兄弟组件中的方法#xff0c;如下写个小demo记录下心得#xff0c;如果你有好的方法#xff0c;请到评论区域指教 父组件示例代码#xff1a; 组件功能解析#xff1a; 通过$emit获取子组件事件#xff0c;通过$ref调用子组件中… 小计 开发中遇到子组件需要调用兄弟组件中的方法如下写个小demo记录下心得如果你有好的方法请到评论区域指教 父组件示例代码 组件功能解析 通过$emit获取子组件事件通过$ref调用子组件中事件实现子组件二的click事件调用兄弟组件一中的事件 templatediv!-- 子组件1 --son1 refborther :dataFromFatherdataFromFather/son1!-- 子组件2 --son2 triggerBrotherMethodstriggerBrotherMethods :dataFromFatherdataFromFather/son2/div
/templatescript
// 引入子组件一
import son1 from ./son1
// 引入子组件二
import son2 from ./son2export default {data() {return {dataFromFather: []}},// 注册子组件components: {son1,son2},methods: {// 子组件2中click事件triggerBrotherMethods() {// 父组件通过$ref调用子组件1中的事件方法this.$refs.borther[0].bortherMethods()},}
}
/scriptstyle langless scoped
/* .... */
/style 子组件一 组件功能解析 加载父组件数据进行业务操作template!-- 子组件son2 --div clickbortherMethods!-- 父组件传值展示 --{{dataFromFather}}/div
/templatescript
export default {data() {return {}},props: [dataFromFather],methods: {// 兄弟组件中的按钮事件bortherMethods() {// 子组件事件方法...},}
}
/scriptstyle langless scoped
/* .... */
/style 子组件二 组件功能解析 加载父组件数据通过click事件emit传给父组件 template!-- 子组件son2 --div clicktriggerBrotherMethods!-- 父组件传值展示 --{{dataFromFather}}/div
/templatescript
export default {data() {return {}},props: [dataFromFather],methods: {// 触发兄弟组件中的按钮事件triggerBrotherMethods() {this.$emit(clickBrotherBtn, true)},}
}
/scriptstyle langless scoped
/* .... */
/style
