陶醉的松鼠

外观

本页目录

v-model在自定义组件上的使用 ​

通常我们看到v-model都会想到input输入框啥的，其实不仅仅是在input上可以双向数据绑定，同时可以作用在父子组件通信上。 ​

vue
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="./fontFace.css">
  <script crossorigin="anonymous" integrity="sha384-+jvb+jCJ37FkNjPyYLI3KJzQeD8pPFXUra3B/QJFqQ3txYrUPIP1eOfxK4h3cKZP"
          src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>

</head>

<body>
<div id="app">
  <div class="details">
    <my-component v-model='show' style="border:1px solid #ccc;"></my-component>
    <button @click="changeValue">切换状态</button>
    {{show}}
  </div>
</div>
</body>
<script>
  Vue.component('my-component', {
    template: `<div v-if="value">
                <p>默认初始值是{{value}}，所以是显示的</p>
                <button @click.stop="closeDiv">关闭</button>
             </div>`,
    props: ['value'], //这个接收值必须是value，固定的
    /*props: {
     value: {
     type: Boolean,
     default: false
     },
     },*/
    methods: {
      closeDiv() {
        //触发 input 事件，并传入新值，注意，这个input是搭配v-model的固定写法
        this.$emit('input', false);
      }
    }
  })
  new Vue({
    el: "#app",
    data() {
      return {
        show: true,
      }
    },
    methods: {
      changeValue() {
        this.show = !this.show
      }
    }
  })
</script>

</html>

如何改变固定属性value ​

上面案例中所说的子组件中接收值必须是value，其实vue.js也没有那么笨拙，修改也是可以的，只是代码就没那么清爽了，当然，value作为一个常用关键词，能规避还是规避下比较好，将上面script部分改为下面内容即可！

vue
<script>
	Vue.component('my-component', {
	template: `<div v-if="zdy">
                <p>默认初始值是{{zdy}}，所以是显示的</p>
                <button @click.stop="closeDiv">关闭</button>
             </div>`,
	model: {
	// props：设置收到父组件v-model绑定的属性名，默认就是value
	prop: "zdy",
	// event：设置this.$emit的事件名，默认是'input''
	event: "zidingyi"
},
	// props: ['value'], //这个接收值默认是value
	props: {
	zdy: {
	type: Boolean,
	default: false
},
},
	methods: {
	closeDiv() {
	//触发 input 事件，并传入新值，注意，通过v-model方式事件名默认是'input'，可以通过model去修改
	// this.$emit('input', false);
	this.$emit('zidingyi', false);
}
}
})
	new Vue({
	el: "#app",
	data() {
	return {
	show: true,
}
},
	methods: {
	changeValue() {
	this.show = !this.show
}
}
})
</script>

通过v-model方式特别简洁清爽，比async修饰符显得更简单 ​

当然也可以直接在子组件内，修改v-model的值，不用this.$emit