您的位置：首页 > Web前端 > Vue.js

vue-单向数据流

2020-08-13 21:22 731 查看

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传递给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。 message:{val:""}

<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="msg.value">
<hr>
<son :msg="msg"></son>
</div>
</template>
<template id="son">
<div>
<input type="text" v-model="msg.value">
</div>
</template>
</body>
<script>
Vue.component("father",{
template:"#father",
data(){
return {
msg:{ //父组件可以将msg这个地址引用传递子组件，此时，子组件修改数据，父组件也跟着修改
value:"father"
}
}
},
components:{
son:{
props:["msg"],
template:"#son"
}
}
})
new Vue({
el:"#app"
})
</script>

组件间的数据调用

组件、实例对象上有这样的属性：$parent,$children,$root,

这样的话，就形成了viewmodel链(关系链)，

理论上来说，任何两个组件之间的数据都可以互相调用，获取

缺点：如果组件很多的话，写出来的代码会很乱

<body>
<div id="app">
<aaa></aaa>
</div>
<!--创建组件a-->
<template id="aaa">
<div>
<p>这是A组件...</p>
<input type="text" v-model="msg">
<hr>
<bbb :msg="msg"></bbb>
</div>
</template>
<!--创建组件b-->
<template id="bbb">
<div>
<input type="text" v-model="ownMsg">
</div>
</template>
</body>

<script>
Vue.component("aaa",{
template:"#aaa",
data(){
return {
msg:"hello"
}
}
})
Vue.component("bbb",{
template:"#bbb",
props:["msg"],
computed:{
ownMsg:{
get(){
return this.msg
},
set(val){
//希望父组件aaa的msg变成val
// this.msg = val
this.$parent.msg = val
}
}
}
})
var vm = new Vue({
el:"#app"
})
</script>

v-model 可以用在组件通信？

可以的。在组件上面使用v-model指令，相当于绑定了value属性与监听input事件。

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

标签：

相关文章推荐

新的分享

章节导航