如题


需求：

将input 限制在 1-99 之间

子组件向父组件发送数据
//子组件文本框
<input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/>
//maxlength="2" 将数据限制在两个字符内,初步限制不会超过99
//向父组件传递数据
methods: {
          changeNum(id, $event) {
            this.$emit('change-num', {
              id,
              num: $event.target.value,
              type: 'change',
            });
          },
		}

父组件对数据的处理
//子组件的使用
<shop-cart-list :list="list" @list-del="listDel($event)" @change-num="changeNum($event)"></shop-cart-list>

//对数据的处理
methods: {
          changeNum(val) {
            if (val.type == 'change') {
              this.list.find((item) => {
                if (item.id === val.id) {
                  //将数据进行了处理,不能为非数字或者 <= 0，如果是就赋值为 1
                  val.num > 0 ? val.num : (val.num = 1);
                  //解决方案就是将父组件的数据进行改变，在重新赋值，数据改变，页面重新更新
                  val.num == item.num ? (item.num = 999) : '';
                  this.$set(item, 'num', val.num);
                }
              });
            }
          }
      	}

大致思路：

当子组件连续多次传递非法的数据,会导致子组件的数据和父组件的数据一致，数据不变化页面不更新，而我的页面没有使用v-model进行双向绑定，而是使用的:value来控制页面的数据显示，所以页面显示的是当前输入的非法数据，没有改变。
后面了解到官方提供了解决方案：
changeCount() {
      let val = +parseInt(this.$refs.input.value);
      if (val < 1 || !val) val = 1;
      // 这个函数是用来强制更新用的，用了这个问题就解决了
      this.$forceUpdate();
      this.$emit('changeCount', val);
    },

1、props
在vue中，父组件，可以将值传递给子组件。并且这个值，在父组件中更新后，同样会触发子组件更新。
子组件：
<template>
    <div>
        子组件展示父组件传入的值：{{timer}}
    </div>
</template>

<script>
    export default {
        name: "child",
        props:['timer'],
    }
</script>


父组件：
<template>
    <div>
        <h2>父组件中的值：{{fTime}}</h2>
        <!-- 使用子组件 -->
        <child v-bind:timer="fTime"></child>
        
    </div>
</template>

<script>
// 导入子组件
    import childchild from "../components/childchildchild.vue";
    export default {
        name: "father",
        components: {
            child,
        },
        data(){
            return{
                fTime:new Date().getTime()
            }
        },
        created() {
        // 周期性更改父组件中的值
        // 子组件同步进行修改
            setInterval(() => {
                this.fTime = new Date().getTime();
            }, 2000)
        },

    }
</script>

该种方式，是能将值，从父组件，传递给子组件，而不能逆向传递。如果子组件中的值发生了更改，不会触发父组件刷新视图。
2、子组件向父组件传递值
如果希望通过子组件，来改变父组件的值，有这样两种方式：

通过定义全局的事件，父组件进行监听，子组件进行触发，然后更改的值通过事件参数进行传递
给子组件设置一个自定义的事件，子组件触发，然后父组件获取事件参数

子组件：
<template>
    <div>
        子组件展示父组件传入的值：{{timer}}
        <button @click="changeTime">子组件中，改变timer 的值</button>
    </div>
</template>

<script>
    export default {
        name: "child",
        props:['timer'],
        methods:{
            changeTime(){
                this.$emit('setTime',new Date().getTime())
            }
        }
    }
</script>


父组件
<template>
    <div>
        <h4>父组件中的值：{{fTime}}</h4>
<child v-on:setTime="setTimeHandle" v-bind:timer="fTime"></child>
    </div>
</template>

<script>
    import child from "../components/child.vue";
    export default {
        name: "child",
        components: {
            child,
        },
        data() {
            return {
                fTime: new Date().getTime(),
            }
        },
        methods: {
            setTimeHandle(e){
                console.log(e)
                this.fTime = e;
            },
        },
    }
</script>


点击按钮时，会触发自定义事件，并且将希望改为的值，通过自定义事件传递给父组件，父组件重新复制，会触发子组件刷新
3、.sync修饰符
在 vue 2.3 中，为了提供更高效的开发方式，对子组件向父组件通信进行了封装（2 中代码）。使用 .sync 语法糖，代替了原本需要些一大堆的事件监听模式。
在子组件中，使用this.$emit("update:属性名",新值);来对props 里面被.sync 修饰的值进行修改。
在父组件中，<child v-bind:属性名.sync="属性值"></child>，使用 b-bind 配合 sync 修饰符
子组件：
<template>
    <div>
        子组件展示父组件传入的值：{{timer}}
    </div>
</template>

<script>
    export default {
        name: "floatMenu",
        props:['timer'],
        mounted() {
            setInterval(()=>{
                this.$emit("update:timer",new Date().getTime());
            },2000)
        },
    }
</script>

<style scoped>

</style>

父组件：
<template>
    <div>
        <h4>父组件中的值：{{fTime}}</h4>
        <child v-bind:timer.sync="fTime"></child>
    </div>
</template>

<script>
    import child from "../components/child.vue";

    export default {
        name: "father",
        components: {
            child,
        },
        data() {
            return {
                active: "index",
                fTime: new Date().getTime(),
            }
        },
    }
</script>

子组件

props : [“data”],
子组件监听
	watch:{
    data : (n ,o) => {//箭头函数  不然会发生this改变
        console.log(n.img)
        this.imgs = n.img
      }
 }

在子组件中更新props中的属性值，并且更新到父组件，有两种实现方式：.sync 和 自定义v-model

1、.sync属性

父组件在给子组件传值时，属性名后需要加修饰符.sync，格式 :子组件props属性名.sync
	
子组件向上弹射事件给父组件时，事件名必须为格式 update:props属性名
父组件

<template>
<div id="app">
    // 注意点一、:show后跟修饰符.sync
    // 等同于<my-componen :show="child" @update:show="val => child= val" />
    <my-component :show.sync='child' />
</div>
</template>
<script>
export default {
    data(): {
        return {child: false}
    }
}
</script>

子组件

<template>
    <h3>{{show}}</h3>
    <button @click="eventOn">子组件事件</button>
</template>
<script>
export default {
   props: {
       show: { type: Boolean, default: false}
    } ,
    methods: {
        eventOn() {
            // 注意二、事件名必须为update:属性名
            // 更改prop中的属性show的属性值，同时更新父组件中中child的属性值
             this.$emit('update:show', false);
        }
    }
}
</script>

2、v-model应用

子组件定义的属性名必须为 value
	
父组件向上弹射事件给子组件时，事件名必须为 input
父组件

<template>
<div id="app">
   // 等同于<my-componen :value="child" @input="val => child= val" />
    <my-component :value='child' />
</div>
</template>
<script>
export default {
    data(): {
        return {child: false}
    }
}
</script>

子组件

<template>
    <h3>{{value}}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
   props: {
     // 注意点一、属性名必须为value
      value: { type: Boolean, default: false}
    } ,
    methods: {
        eventOpt() {
            // 注意二、事件名必须为input
            // 更改prop中的属性value的属性值，同时更新父组件中中child的属性值
             this.$emit('input', false);
        }
    }
}
</script>

比较


v-model 子组件只能更改props中的一个属性值value；样例第二种

.sync 子组件可以更改props中的多个属性值；