临汾万词霸屏网站建设免费咨询,如何进行网站建设,网站的优势与不足,中国做网站最好的父子组件Vue中常见的是父与子组件间的通信#xff0c;所要用到的关键字段是props和$emit。props接受父组件传给子组件信息的字段#xff0c;它的类型#xff1a;Arraystring | Object;详细解释可以参考https://cn.vuejs.org/v2/api/#props$emit由子组件触发事件向上…父子组件Vue中常见的是父与子组件间的通信所要用到的关键字段是props和$emit。props接受父组件传给子组件信息的字段它的类型Arraystring | Object;详细解释可以参考https://cn.vuejs.org/v2/api/#props$emit由子组件触发事件向上传播给父级消息。示例// Parenttemplatedivclassparent我是父组件p来自子级的回答{{ childMsg }}/pChild:msgmsg clickhandleClick//div/templatescriptimportChildfrom./Child;
exportdefault {name: Parent,components: {Child},data() {return {msg: 叫你吃饭了,childMsg: };},methods: {// 接收来自子级的事件消息handleClick(val) {this.childMsg val;} }
};
/script// Child
templatedivclasschildp我是子组件/pp父级来的信息 {{ msg }}/pbutton clickhandleClick回答父级/button/div/templatescriptexportdefault {name: Child,// 接收父级传来的信息props: {msg: String},methods: {// 向父级传播事件消息handleClick() {this.$emit(click, 我知道了);}},
};
/script祖孙组件有时候我们可能会碰到组件间的无限嵌套这时我们使用props时无法向下无限极传递数据的我们可以用到provide/injectprovide可以向其子孙组件传递数据而不关子孙组件的层级有多深使用inject都可以拿到数据。详细解释可以参考https://cn.vuejs.org/v2/api/#provide-inject示例// Grand
templatedivclassgrandp我是祖父/pParent //div/templatescriptexportdefault{name: Grand,provide: {grandMsg: 都来吃饭},components: {Parent}
};
/script// Parent
templatedivclassparent我是父组件p祖父的信息{{ grandMsg }}/pChild //div/templatescriptimportChildfrom./Child;
exportdefault{name: Parent,components: {Child},inject: {grandMsg: {default: }}
};// Childtemplatediv classchildp我是子组件/pp爷爷的信息 {{ grandMsg }}/p/div/template
scriptexportdefault{name: Child,inject: {grandMsg: {default: }}
};
/scriptprovide 和 inject 绑定并不是可响应的。我们可以通过传递祖父级的实例this或着使用observable来使传递的数据是响应的。// Grand
templatedivclassgrandp我是祖父/pinputtypetextv-modelmsgplaceholder输入祖父的消息/Parent //div/templatescriptimportParentfrom./Parent;
exportdefault {name: Grand,provide() {return { // 利用函数 provide 返回对象grandVm: this// 传递实例};},...data() {return {msg: };}
};
/script// Child
templatedivclasschildp我是子组件/pp爷爷的实例信息 {{ grandVmMsg }}/p/div/templatescriptexportdefault {name: Child,inject: {grandVm: {default: () {;}}},computed: {grandVmMsg() {returnthis.grandVm.msg;}}
};
/script使用observable让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。示例// Grand
provide() {this.read Vue.observable({msg: })return {read: this.read};
}复制代码兄弟组件同级别组件相互间的通信我们可以使用EventBus或着Vuex。简单的EventBus示例// Bus.jsimportVuefromvue;
exportdefaultnewVue();// Childdivclasschildp我是子组件一/pbutton clickhandleClick组件一事件/button/divscriptimportBusfrom./Bus;
exportdefault {name: Child,methods: {handleClick() {Bus.$emit(click, 嘿老铁);}}
};
/script// ChildOnedivclasschildp我是子组件二/pp兄弟叫我{{ msg }}/p/divscriptimportBusfrom./Bus;
exportdefault {name: ChildOne,data() {return {msg: };},mounted() {Bus.$on(click, msg {this.msg msg;});}
};
/scriptv-model与syncv-model是我们用ElementUI常见的表单绑定值方式可以直接修改子组件修改父组件传入的值简化了我们组件通信的逻辑。示例// ModelCom
div classchildinputtypetext inputhandleInput/divscriptexportdefault {name: ModelSync,methods: {// 通过绑定表单input中的input事件向上触发input事件来修改值handleInput(e) {const value e.target.value;this.$emit(input, value);}}
};
/script// HomeModelSyncv-modelmsg/sync修饰符也可以是我们的prop进行双向绑定。它需要我们在子组件内触发this.$emit(update:prop, val)事件// ModelCom
input typetextinputhandleChange
...
props: [value],
methods: {handleChange(e) {const value e.target.value;// 触发更新this.$emit(update:value, value);}
}// Home
ModelSync :value.syncsyncMsg/复制代码$children与$parent我们可以在组件中通过当前的实例对象访问到组件的$children和$parent来找到各自组件的父级组件或子级组件实例。示例// Child
divclasschildp我是子组件/pp来自父组件的msg: {{ msg }}/p/div
...
scriptexportdefault {name: ChildParent,data() {return {value: }},computed: {msg() {returnthis.$parent.value;}},created() {console.log(this.$parent); }
}// Parent
input v-modelvalue /
复制代码通过在父组件中输入值可以看到子组件数据也同时更新了$attrs与$listeners$attrs可以通过 v-bind$attrs 将组件上的特性都class 和 style 除外传入内部组件传入的值与inheritAttrs的设置有关通常封装高级组件。当我们inheritAttrs 设置 true组件渲染DOM时写在组件的特性会渲染上去$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on$listeners 传入内部组件。具体详细可见https://cn.vuejs.org/v2/api/?#vm-attrs示例// Attr
divclasschildpAttr/pp这是$attrs{{ placeholder }}/pp这是$listeners{{ test }}/pbutton click$listeners.click监听了$listeners/button/div
...
scriptexportdefault {name: AttrListen,inheritAttrs: true,props: {test: {type: String,default: }},data() {return {placeholder: this.$attrs.placeholder}}
};
/script// Home
AttrListenplaceholder这是个attr:testvaluev-bind$attrsv-on$listeners clickhandleListen/复制代码通过封装查找组件通过封装函数来向上或向下派发事件// emitter.js
function broadcast(componentName, eventName, params) {this.$children.forEach(child {const name child.$options.name;if(name componentName) {child.$emit.apply(child, [eventName].concat(params));} else {broadcast.apply(child, [componentName, eventName].concat([params]));}});
}
export default {methods: {dispatch(componentName, eventName, params) {let parent this.$parent || this.$root;let name parent.$options.name;while (parent (!name || name ! componentName)) {parent parent.$parent;if (parent) {name parent.$options.name;}}if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);}}
};
复制代码通过封装函数来查找指定任意组件// 由一个组件向上找到最近的指定组件
function findComponentUpward (context, componentName) {let parent context.$parent;let name parent.$options.name;while (parent (!name || [componentName].indexOf(name) 0)) {parent parent.$parent;if (parent) name parent.$options.name;}return parent;
}
export { findComponentUpward };// 由一个组件向上找到所有的指定组件
function findComponentsUpward (context, componentName) {let parents [];const parent context.$parent;if (parent) {if (parent.$options.name componentName) parents.push(parent);return parents.concat(findComponentsUpward(parent, componentName));} else {return [];}
}
export { findComponentsUpward };// 由一个组件向下找到所有指定的组件
function findComponentsDownward (context, componentName) {returncontext.$children.reduce((components, child) {if (child.$options.name componentName) components.push(child);const foundChilds findComponentsDownward(child, componentName);return components.concat(foundChilds);}, []);
}
export { findComponentsDownward };// 由一个组件找到指定组件的兄弟组件
function findBrothersComponents (context, componentName, exceptMe true) {let res context.$parent.$children.filter(item {returnitem.$options.name componentName;});let index res.findIndex(item item._uid context._uid);if (exceptMe) res.splice(index, 1);return res;
}
export { findBrothersComponents };
