vue 学习六 在组件上使用v-model

其实这个部分应该是属于component，为什么把这玩意单独拿出来呢，原因是它这个东西比较涉及到了vue的事件，以及v-model指令的使用，还是比较综合的。所以就拿出来啦

父组件

<template>
  <div id="a">
  //在子组件的com上使用v-model  在这里监听change1事件是为了更好的描述在子组件上使用v-model是，绑定的值的变化
    <com1 v-model="test" @change1="change_even"></com1>
  </div>
</template>

<script>
import com1 from "./b_router";
export default {
  name: "a_router",
  components: {
    com1
  },
  data() {
    return {
      test: "123"
    };
  },
  created() {

  },
  methods:{
    change_even(e){
      console.log(e);
    }
  }
};
</script>

子组件

<template>
  <div id="b">
    <h1>b_router</h1>
    <input type="test" v-model="val"/> //在这里不能直接绑定使用checked 因为vue不允许在子组件中更改父组件中的变量值，这会引起其他使用父组件中变量的子组件，和父组件中使用变量的元素发生变化
  </div>
</template>

<script>
export default {
  name: "b_router",
  data() {
    return {
        val:null
    };
  },
  model: {//用model字段，而非props
    prop: "checked",//定义在子组件中使用checked作为父组件通过v-model的变量test的别名
    event: "change1"//定义在cheked值发生变化时，触发的事件，这一步是实现更改父组件中在子组件上v-model的变量test的值的关键
  },
  props:{//你仍需要在这里定义，子组件才能使用checked变量
      checked:String
  },
  created(){
 let vm=this;
 console.log(this.checked)
  },
  watch:{
      val(){//每次val值变化执行
          this.$emit('change1',this.val)//触发change1事件并将第二个参数的值赋值给父组件中在子组件上v-model的test变量，同时当前组件的checked变量也会同步改变
      }
  }
};
</script>

<style scoped>
</style>