定制化网站开发的好处,牛商网朱依静,如皋电子商城网站建设,php网站有哪些组件通讯的方案
通过 props 传递 (父子组件传值)通过 $emit 触发 父组件自定义事件父组件使用 ref 访问子组件实例EventBus #xff1a;需要中间文件#xff0c;$emit触发事件#xff0c;$on监听$parent 或者 $root : 可以利用祖先组件搭桥 this.$parent.on(add,this.add) …组件通讯的方案
通过 props 传递 (父子组件传值)通过 $emit 触发 父组件自定义事件父组件使用 ref 访问子组件实例EventBus 需要中间文件$emit触发事件$on监听$parent 或者 $root : 可以利用祖先组件搭桥 this.$parent.on(add,this.add) 监听事件this.$parent.emit(add)触发事件 $children$attrs 与 $listeners (可以访问未在props接收的属性和方法)Provide祖先提供 与 Inject 后代注入Vuex
总结
父子 props 与 $emit进行传递也可选择ref兄弟$bus$parent祖先与后代$attrs与$listeners 或者 Provide与 Inject复杂关系: vuex存放共享的变量
demo
父子 props 与 $emit进行传递也可选择ref
// parent.vue
Children refchild :msgmsg handleClickhandleClick/Children
// JS部分
script
// $refs可以访问子组件的属性和方法
console.log(this.$refs.child.str) // abc
/script// Children.vue 只写核心代码不是完整组件
template
div click$emit(handleClick, good)
{{mst}}
div
/template
script
props: [msg, handleClick]
data(){return {str: abc}
}
/script
兄弟$bus$parent
// evenBus.js
// 方法一创建一个中央时间总线类
class Bus { constructor() { this.callbacks {}; // 存放事件的名字 } // 把事件以{fnName: []}存起来$on(fnName, fn) { this.callbacks[fnName] this.callbacks[fnName] || []; this.callbacks[fnName].push(fn); } // 通过方法名调用$emit(fnName, args) { if (this.callbacks[fnName]) { this.callbacks[fnName].forEach((cb) cb(args)); } }
} // main.js
Vue.prototype.$bus new Bus() // 将$bus挂载到vue实例的原型上 // 方法二Vue已经实现了Bus的功能可以直接引入使用
import Vue from vue
Vue.prototype.$bus new Vue()
// 使用----------------------------------------------------------
// Com1.vue 添加事件
this.$bus.$on(foo, this.handle)
// Com2.vue 触发事件
this.$bus.$emit(foo)
祖先与后代$attrs与$listeners 或者 Provide与 Inject
// parent.vue ----------------------
Child foofoo testEventtestEvent/ // Child.vue并未在props中声明foo --------------------
p{{$attrs.foo}}/p
Grandson v-bind$attrs v-on$listeners/Grandson // Grandson.vue --------------------------------
div click$emit(testEvent, msg from grandson)
{{foo}}
/div // parent.vue ----------------------
Child/
provide(){ return { foo:foo,testEvent: this.testEvent}
},
methods: {testEvent () {console.log(你好)}
}
// Child.vue --------------------
Grandson/Grandson // Grandson.vue --------------------------------
div click$emit(testEvent, msg from grandson)
{{foo}}
/div
inject:[foo, testEvent]复杂关系: vuex存放共享的变量 state: 用来存放共享变量的地方 getter: 可以增加一个getter派生状态(相当于store中的计算属性用来获得共享变量的值 mutations: 用来存放修改state的方法。 actions: 也是用来存放修改state的方法不过action是在mutations的基础上进行。常用来做一些异步操作
