首页 / VUE / vue数据绑定方式详解
vue数据绑定方式详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue数据绑定方式详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3425字，纯文字阅读大概需要5分钟。
内容图文
众所周知，vue是单向数据流，子组件不能直接改变父组件中的变量，如下：parent.vue
<template>
<p>
<p>parent:{{ msg }}</p>
<children :msg="msg"></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
}
}
</script>children.vue
<template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击改变children的msg</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
props: ['msg'],
methods: {
changeChild() {
this.msg = 'from children'
}
}
}
</script>页面如下：
点击后：
上面是最基础的父向子组件传递数据，子组件修改变量不影响父组件，那么父子组件如果要同步呢？这时应该使用this.$emit()这个函数了。
第一种：v-model传递
父组件修改：
<template>
<p>
<p>parent:{{ msg }}</p>
<children v-model="msg"></children>
</p>
</template>子组件修改：
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('input', "child")
}
}
}
</script>注意：model部分不能省略，this.$emit（）触发的事件为input（当父组件上没有明确绑定返回事件时，input为默认），传递的值为child
页面如下：
点击后：
可见父子组件的值同步了
第二种：明确指定响应事件（@）
父组件修改：
<template>
<p>
<p>parent:{{ msg }}</p>
<children @upChange="changeMsg" :msg="msg"></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
},
methods: {
changeMsg() {
this.msg = "收到子组件信号，嘤嘤嘤"
}
}
}
</script>子组件修改：
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('upChange', "给你一个value")
this.msg = 'from children'
}
}
}
</script>这里我故意在emit之后修改了msg的值，事实证明，这是不行的，所以我猜测emit是一个异步函数，会在队列的最后执行，也就是说这里赋值‘from children’最后被覆盖了。
值得一提的是，this.$emit（）第二个参数可向父组件传值，这里用处很大，自行体会
页面如下：
点击后：
两种方法都基本可以达到预期效果，具体自己分情况使用
说完父子通信后，理所当然到子子组件通信了，其实，机智的你应该也想到怎么做了吧。没错，就是利用父组件当跳板，让子子组件达到通信的效果。
下面还是给个小例子：
父组件：
<template>
<p>
<children @upChange="changeMsg" :msg="msg"></children>
<children2 :msg2="msg2"></children2>
</p>
</template>
<script>
import children from '@/components/children'
import children2 from '@/components/children2'
export default {
name: 'parent',
data() {
return {
msg: 'from parent',
msg2: 'from parent'
}
},
components: {
children,
children2
},
methods: {
changeMsg(value) {
this.msg = value
this.changeChild2()
},
changeChild2() {
this.msg2 = "children2收到 children2收到 over over！"
}
}
}
</script>子组件一：
<template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击呼叫children2</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('upChange', "children2，children2，收到请回答，收到请回答")
}
}
}
</script>子组件二：
<template>
<p>
<p>children2: {{ msg2 }}</p>
</p>
</template>
<script>
export default {
name: 'children2',
data () {
return {
}
},
props: ['msg2']
}
</script>页面如下： 点击后：
本文介绍了vue数据绑定方式详解 ，更多相关内容请关注Gxl网。
相关推荐：
简易 PHP+MySQL 分页类
两个不用递归的树形数组构造函数
HTML转Excel，并实现打印，下载功能
以上就是vue数据绑定方式详解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的vue数据绑定方式详解全部内容，希望文章能够帮你解决vue数据绑定方式详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。