vue2使用v-model父子组件的值双向绑定

1、使用场景

    参考vue2使用sync修饰符父子组件的值双向绑定
    自定义组件v-model官方描述

2、v-model使用方式

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突

• 子组件代码部分
  1、通过model选项来修改event和prop，因为我们的组件不是一个input，v-model默认用的是prop和input的事件
  2、通过 this.$emit(‘change’,false)，将修改的事件emit出去

<template>
  <div class="hello">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'dialogVisible',
    event: 'change'
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },

  },
  methods: {
    handleClose(done) {
      this.$emit('change',false)
    },
     handleConfrim() {
      this.$emit('change',false)

    },

  }
};
</script>

• 父组件代码部分
  1、只需将引入的子组件设置为v-model，它会默认为这个组件绑定一个change时间和值

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <el-button type="primary" @click="isShow = true">{{ '展示弹窗' }}</el-button>
    <HelloWorld v-model="isShow" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      isShow: false
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、不使用model的情况，input的情况

• 子组件代码部分
  这里没有使用model选项，因为自定义组件的v-model本身就是使用的input的事件

<template>
  <div class="hello">
    <input :value="strtxt" @input="change">
  </div>
</template>

<script>
export default {
  props: {
    strtxt: {
      type: String,
      default: ''
    },

  },
   mounted() {
    console.log('22222','怎么回事')
    
  },

  methods: {
    change(e) {
      this.$emit('input', e.data)
    }
  }
};
</script>

• 父组件代码部分
  在input框中的每次输入，都会将值赋值给strText

<template>
  <div id="app">
    <div>{{ strText  }}</div>
    <HelloWorld v-model="strText" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      strText: '222'
    }
  }

}
</script>