Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

最新推荐文章于 2024-01-17 20:19:10 发布

huang100qi

最新推荐文章于 2024-01-17 20:19:10 发布

阅读量352

点赞数

分类专栏： vue

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

所以官方推荐以update:my-prop-name 的模式触发事件取而代之

为了好理解，我写了一个很简单的小例子：（单击输入框，显示或隐藏下面的box）

下面是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
margin:10px auto;
width:200px;
height:200px;}
input{
width:200px;
height:30px;
border:1px solid red;
outline:none;
}
.show{
width:200px;
height:200px;
background: orange;
border:1px solid red;
border-top:none;
}

</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<costum-show :is-show.sync="isShow"></costum-show>
<div class="show" v-show="isShow"></div>
</div>
<script>
Vue.component('costum-show',{
props:['isShow'],
template:`
<div>
<input type="text" val="" @click="showHandle">
</div>
`,
methods:{
showHandle(){
this.$emit("update:isShow",!this.isShow);
}
}
})
var vm = new Vue({
el:'#app',
data:{
isShow:false
}

})
</script>
</body>
</html>

huang100qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。所以官方推荐以update:my-prop-name 的模式触发事件取而代之为了好理解，我写了一个很简单的小例子：（单击输入框，显示或隐藏下面的box）下面是完整的代码：&lt;!DOCTYPE html&gt;...
复制链接

扫一扫

专栏目录