vue 自定义组件使用v-model（组件通信方式1）

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改父组件v-model绑定的值

child:

<template>
    <div>
      <input type="text" v-model="mymessage" @change="changeValue">
    </div>
</template>

<script>
     export default {
          name: "child",
       model:{
         prop: "mymessage",
         event: "change"
       },这段代码可以忽略
       props:{
            value:String //v-model会自动传递一个字段为value的prop属性
       },
       data(){
            return {
              mymessage:this.value
            }
       },
       methods:{
         changeValue(){
           this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
         }
       }
     }
</script>
parent:

<template>
    <div>
      <p>this is parent compoent!</p>
      <p>{{message}}</p>
      <child v-model="message"></child>
    </div>
</template>

<script>
  import child from '../components/child'
     export default {
          name: "parent",
       data(){
            return {
              message:'hello'
            }
       },
       components:{
            child
       }
     }
</script>
以上代码可以写成子组件通过接收props父亲传递的数据，子组件通过$emit发射事件将父组件的input值message更改，代码如下：

child:

<template>
    <div>
      <input type="text" v-model="mymessage" @change="changeValue">
    </div>
</template>

<script>
     export default {
          name: "childOne",
       props:{
         value:String, //v-model会自动传递一个字段为value的prop属性
       },
       data(){
         return {
           mymessage:this.value
         }
       },
       methods:{
         changeValue(){
           this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值
         }
       }
     }
</script>
parents:

<template>
    <div>
      <p>{{message}}</p>
      <childone @input="handleMessage"></childone>//监听子组件发射的事件input，将input的value值更改

    </div>
</template>

<script>
  import childone from '../components/childOne'
     export default {
          name: "parentOne",
       components:{
         childone
       },
       data(){
         return {
           message:'hello'
         }
       },
       methods:{
         handleMessage(val){
           this.message = val
         }
       }
     }
</script>

巴特西

vue 自定义组件使用v-model（组件通信方式1）

最新文章

热门文章