【Vue】自定义组件绑定 v-model
components 组件全局和局部的用法
·
文章目录
- 示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />{{message}}
<!-- v-model 相当于 v-bind 和 v-on -->
<input type="text" v-bind:value="message" @input="change($event)" />{{message}}
<!--
不可以 直接在子组件上绑定 v-model ,想要实现该效果,
必须在子组件的里面使用 $emit 去主动触发自定义事件
-->
<child v-model="msg" :value="msg"></child>{{msg}}
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var child = {
props: ['value'],
template: `<div>
子组件
<input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
</div>`
}
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: { // 定义vue对象的数据
msg: "hello",
message: "hi"
},
components: {
child
},
methods: {
change(ev) {
this.message = ev.target.value;
}
}
})
</script>
</body>
</html>
- 运行结果:
更多推荐
已为社区贡献10条内容
所有评论(0)