iview踩坑笔记

1、表单验证不通过问题

输入框中有值,但表单仍显示不通过

解决方案：

• Form标签中是否为:model,不是则改为:model
• Form标签中必须添加ref
• FormItem标签中prop的值必须与v-model一致，如：v-model='form.test'，那么prop='test'

2、子组件的created()不生效

情景代码:

// 父组件页面代码
<template>
      <father  v-show="flag === 'father'"></father>
       <son v-show="flag === 'son'  v-bind:info="info" ></son>
</template>

<script>
   export default {
   	  data() {
   	       return  {
   	              info: {
   	                   name: 'Jack',
   	                   age: 11
   	              }
   	       }
   	  }
   }         
</script>

// 子组件代码
<template>
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   }         
</script>

不生效原因: v-show使得子组件和父组件在页面刷新时，两个都进行了渲染。因此子组件的created()在页面刷新时已经执行，后续再显示子组件时，便不再执行created()中的方法。

解决方案

• 使用v-if,使得进入子组件后刷新，重新渲染，触发created()

 <template>
      <father  v-show="flag === 'father'"></father>
       <son v-if="flag === 'son'" v-bind:info="info" ></son>
</template>

• 使得进入子组件后刷新，重新渲染，触发created()

<template>
      <father  v-show="flag=='father'"></father>
      <div v-show="flag === 'son'">
             <son v-if="refresh === true"  v-bind:info="info" ></son>
      </div>
       
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   	  data() {
   		 return {
   		 	refresh: false
   		  }
   	  },
   	  methods: {
   	        // 进入子组件时，触发该方法即可
   	  		intoSon() {
   		  		this.refresh = false;
                 // $nextTick 是在下次 DOM 更新完成后，在执行里面的函数，类似于回调
                this.$nextTick(() => { this.refresh = true; });
   	  		}
   	  }
   }         
</script>

• 通过watch监听父组件的值，当值改变时，调用created()要执行的方法

// 子组件代码
<template>
</template>

<script>
   export default {
   	  props:{
   	       info: {
               name: 'Jack',
               age: 11
   	      }
   	  },
   	  methods: {
   	  	initMethod() {}
   	  }
   	  computed: {
           watchInfo () {
               return this.Info.name;
           }
       },
       created() {
               this.initMethod();
       },
       watch: {
           // 监听info对象，如果info的值变更了，则触发
           Info: {
               handler (newValue, oldValue) {
                    this.initMethod();
               },
               deep: true
           },
           // 也可以通过computed从而监听对象中具体某个属性
           watchInfo(newValue, oldValue) {
           	this.initMethod();
           }
       }
   }