v-model替代父子传值

v-model作用:将一个数据双向绑定到一个子组件中
当v-model应用在组件中时:

• 会默认给子组件传入一个名为value的参数
• 会默认给子组件绑定一个名为input的事件
  一旦input时间触发,它会自动修改v-model传入的数据

实例demo
首先写好父子组件,在父组件中定义需要传递的值modelnum

1,在父组件上引入的子组件用v-model传递一个modelnum值

<template>
  <div id="app">
    <h2>我是app.vue,也是父组件</h2>
    <div>
      父组件中的modelnum:{{modelnum}}
   </div>
    <sonmodel v-model='modelnum'/>
  </div>
</template>

2,在子组件中用props接收

<script>
export default {
    props:['value']
}
</script>

//用{{}}渲染在页面上
<template>
  <div class="son">
      <h2>我是使用了v-model的子组件</h2>
      <div>子组件中的modelnum:{{value}}</div>
  </div>
</template>

input事件的使用,假设需求,点击子组件的按钮,修改modelnum值

3,给按钮添加点击事件,在方法中通过$emit,拿到绑定的input事件,将修改的值传进去

<template>
  <div class="son">
      <h2>我是使用了v-model的子组件</h2>
      <div>父组件中的modelnum:{{value}}</div>
      <button @click='changenum'>点击修改modelnum值</button>
  </div>
</template>

<script>
export default {
    props:['value'],
    methods: {
        changenum(){
            this.$emit('input',100)
        }
    },
}
</script>

当value名称可能因为用于不同的目的会造成冲突,如果想要修改这个默认的名称,官方文档的自定义组件v-model有介绍如何修改.
[官方文档连接:] (cn.vuejs.org/v2/guide/co…)

自定义v-model的参数

model:{
    prop:'value',
    event:'input'
}

在本demo中直接将model中的名称替换,把value和input修改成自定义的参数名称