当前位置: 首页 > wzjs >正文

吉林省建设信息网官网武汉网站开发公司seo

吉林省建设信息网官网,武汉网站开发公司seo,青海seo技术培训,网站框架怎么做的日常开发记录-radioGroup组件 1.前提2.问题&#xff1a;无限循环调用3.解释Vue 事件传播机制分析与无限循环原因解释4.解决 1.前提 在上一章的&#xff0c;我们实现了radio组件。从这进入了解 新增个radioGroup组件呢。 <template><divclass"q-radio-group&quo…

日常开发记录-radioGroup组件

  • 1.前提
  • 2.问题:无限循环调用
  • 3.解释
  • Vue 事件传播机制分析与无限循环原因解释
  • 4.解决

1.前提

在上一章的,我们实现了radio组件。从这进入了解
新增个radioGroup组件呢。

<template><divclass="q-radio-group"role="radiogroup"><slot></slot></div>
</template><script>export default {name: 'MyRadioGroup',componentName: 'MyRadioGroup',props: {value: {},disabled: Boolean,name: String},created() {this.$on('change', value => {this.$emit('change', value);});},watch: {value(value) {// 当值变化时,通知子组件this.$nextTick(() => {// this.$children.forEach(child => {//   if (child.$options.name === 'MyRadio') {//     child.$refs.radio.checked = child.label === value;//   }// });});}}};
</script><style>
.q-radio-group {display: inline-block;
}
</style>

原来的radio组件改写成

<template><labelclass="q-radio":class="{'is-disabled': isDisabled,'is-checked': model === label}"><span class="q-radio__input":class="{'is-disabled': isDisabled,'is-checked': model === label}"><span class="q-radio__inner"></span><inputref="radio"type="radio"class="q-radio__original":value="label":name="name":disabled="isDisabled"v-model="model"@change="handleChange"/></span><span class="q-radio__label"><slot></slot><template v-if="!$slots.default">{{label}}</template></span></label>
</template><script>export default {name: 'MyRadio',props: {value: {},name: String,label: {},disabled: Boolean,},data() {return {// 预先定义 _radioGroup,提高代码可读性_radioGroup: null};},computed: {isGroup() {let parent = this.$parent;while (parent) {if (parent.$options.name !== 'MyRadioGroup') {parent = parent.$parent;} else {this._radioGroup = parent;return true;}}return false;},model: {get() {return this.isGroup ? this._radioGroup.value : this.value;},set(val) {if (this.isGroup) {// 使用 $emit 向上传递事件this._radioGroup.$emit('input', val);} else {this.$emit('input', val);}}},isDisabled() {// 考虑组的禁用状态return this.isGroup ? this._radioGroup.disabled || this.disabled : this.disabled;}},methods: {handleChange() {// 使用 $nextTick 确保状态已更新this.$nextTick(() => {// 触发 change 事件this.$emit('change', this.model);// 如果在组中,也通知组if (this.isGroup) {this._radioGroup.$emit('change', this.model);}});}}}
</script>

引用:

<template><div id="app"><el-container><el-header><h1>Vue 2 + Element UI Template</h1></el-header><el-main><el-row><el-col :span="12" :offset="6"><el-card><div slot="header"><span>欢迎使用</span></div><el-button type="primary">点击我</el-button></el-card></el-col></el-row></el-main><input type="radio" id="contactChoice1" name="contact" value="email" /><label for="contactChoice1">电子邮件</label><input type="radio" id="contactChoice2" name="contact" value="phone" /><label for="contactChoice2">电话</label><input type="radio" id="contactChoice3" name="contact2" value="mail" /><label for="contactChoice3">邮件</label><MyRadio v-model="currentValue.aaa" name="aaa" @input="handleInput" @change="handleChange" label="男"></MyRadio><MyRadio v-model="currentValue.aaa" name="aaa" @input="handleInput" @change="handleChange" label="女"></MyRadio><MyRadio v-model="currentValue2" name="bbb" @input="handleInput" @change="handleChange" label="未知">未知</MyRadio><MyRadioGroup v-model="currentValue.bbb" name="bbb" @change="handleGroupChange"><MyRadio label="男"></MyRadio><MyRadio label="女"></MyRadio></MyRadioGroup><el-button @click="changeGroupVal">改变group的绑定值</el-button><el-radio v-model="radio" label="1" @input="change">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio></el-container></div>
</template><script>
import MyRadio from './components/myRadio.vue'
import MyRadioGroup from './components/myRadioGroup.vue'
export default {name: 'App', data () {return {currentValue: {aaa: '男',bbb: ''},currentValue2: '',radio: '1'}},components: {MyRadio,MyRadioGroup},methods: {handleInput (event) {console.log('input event', event)},changeGroupVal () {this.currentValue.bbb = '女'},handleChange (val) {console.log('change event', val)},change (val) {console.log(val)},handleGroupChange (val) {console.log('group', val)}}
}
</script>

主要在于radio的isGroup和原绑定值的改变,radiogroup就是个插槽。

2.问题:无限循环调用

在这里插入图片描述
会出现无限调用radiogroup组件emit出来的change事件。为什么呢?感觉没问题的应该。
原有的逻辑,事件传递链分析:
当您点击 RadioGroup 中的一个选项时,事件流程如下:
MyRadio 的 model setter 被触发,它调用 this._radioGroup. e m i t ( ′ i n p u t ′ , v a l ) 同时, M y R a d i o 的 h a n d l e C h a n g e 方法被触发,它调用 t h i s . emit('input', val) 同时,MyRadio 的 handleChange 方法被触发,它调用 this. emit(input,val)同时,MyRadiohandleChange方法被触发,它调用this.emit(‘change’, this.model) 和 this._radioGroup. e m i t ( ′ c h a n g e ′ , t h i s . m o d e l ) M y R a d i o G r o u p 监听 到 ′ c h a n g e ′ 事件,它又调用 t h i s . emit('change', this.model) MyRadioGroup 监听到 'change' 事件,它又调用 this. emit(change,this.model)MyRadioGroup监听change事件,它又调用this.emit(‘change’, value)。
感觉这样就完了呀。怎么会一直重复的调用change事件呢。
??????

3.解释

Vue 事件传播机制分析与无限循环原因解释

分析为什么修改事件名可以解决无限循环问题,并解释 Vue 中 $emit 和 $on 的工作原理。
问题根源: 组件自我监听
查看自己的 MyRadioGroup 组件代码:
这里发现了关键问题 - 组件正在监听自己发出的事件,并且在监听器中又发出同名事件,创建了一个经典的无限循环:
步骤1.MyRadio 组件触发 change 事件,并将值发送给 MyRadioGroup
步骤2.MyRadioGroup 接收 change 事件,通过 o n 监听器处理它步骤 3. 处理器调用 t h i s . on 监听器处理它 步骤3.处理器调用 this. on监听器处理它步骤3.处理器调用this.emit(‘change’, value),再次向自己发送 change 事件
步骤4.这又激活了同一个监听器,返回步骤 3,形成无限循环
Vue 事件机制解析
基本工作流程:
$on 将事件处理器存储在组件实例的 _events 对象中
$emit 查找并调用存储在 _events[eventName] 中的处理器
关键点: 当组件对自己发出的事件设置监听器时,每次调用 $emit 都会触发这些监听器,包括那些由同一组件设置的监听器。

4.解决

所以我们只要抛出的方法名变一下就行

this._radioGroup.$emit('handleChange', this.model);//接受created() {this.$on('handleChange', value => {this.$emit('change', value);});}
http://www.dtcms.com/wzjs/107491.html

相关文章:

  • 苏州网站网站建设收录查询 站长工具
  • 网络网站建设推广网络营销战略
  • 做渔家乐推广的有哪些好网站关键词优化排名软件s
  • 民治做网站多少钱浏览器谷歌手机版下载
  • html5做动态网站建设google国外入口
  • 外贸商城网站建设seo排名官网
  • 深圳网站建设手机网站建设北京seo优化方案
  • 西安地区网站建设爱站关键词挖掘查询工具
  • 天津城市建设网站百度教育网站
  • 最专业的外贸网站建设企业seo案例
  • 瑞诺国际做外贸网站好吗seo外包公司专家
  • 网站什么时候做负载均衡企业网站建设模板
  • 淘宝购物券网站怎么做seo公司网站推广
  • 网站策划内容有哪些网络推广公司方案
  • 凡科免费做网站乔拓云智能建站
  • 宿迁专业三合一网站开发专业拓客团队怎么收费
  • 吉林网站建设价格关键词推广系统
  • 网站域名查ip名优网站关键词优化
  • 点墨网站网站系统
  • wordpress文章首字下沉海外广告优化师
  • 招投标网站开发公司淘宝关键词搜索量查询工具
  • 行业网站导航武汉seo人才
  • 网页设计毕业论文豆丁网文山seo公司
  • 泉州外贸b2c网站建设seo网站推广经理
  • 品牌网站的建设直接登录的网站
  • 网站备案不能更新吗实时积分榜
  • 文章做模板 wordpressseo的工作流程
  • 软件开发和网站建设哪个好网站内容seo
  • wordpress自定义页脚郑州seo外包平台
  • 网站建设投标人资质网页制作代码html制作一个网页