您的位置：首页 > 产品设计 > UI/UE

Vue 父组件和子组件之间的双向数据流动 .sync【版本需要2.3.0+】

2017-11-01 17:37 651 查看

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<div id="test">
<my :foo.sync='msg'></my>
<!--@update:foo='val=>msg=val'-->
{{msg}}
</div>

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
Vue.component('my', {
template: '<button @click="change(\'a\')">组件{{foo}}</button>',
props: ['foo'],
methods: {
change: function(newValue) {
console.log(newValue)

this.$emit('update:foo', newValue); //调用update钩子函数更新foo属性，并传入新值，val=>msg=val是ES6箭头写法，function(val){msg=val;}
//使用:foo.sync='msg'这种写法会自动扩展为 @update:foo='val=>msg=>val'【版本要在2.3.0+】，否则需要手动写
}

}

});
var vm = new Vue({
el: '#test',
data: {
msg: '思维'

},
methods: {
go: function() {
console.log('go');

}

}

})
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航