Vue 单文件中的数据传递

来源：互联网发布：文件粉碎软件编辑：程序博客网时间：2024/06/15 21:43

Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：

父组件向子组件传递数据，通过 props 传递数据。
子组件向父组件传递数据，通过 events 传递数据。
两个同级组件之间传递数据，通过 event bus 传递数据。

新建了 6 个文件，分别是：

index.html
main.js 「Vue 实例」
app.vue 「根组件，包含 page 和 footer 组件」
page.vue 「msg 的父组件，footer 的同级组件」
msg.vue
footer.vue

父组件向子组件传递数据，通过 props 传递数据。

这里我以 page 向 msg 传递数据为例：page.vue 中

<template>    <div class="page">        page        <msg :love="message"></msg>    </div></template><script>import msg from './msg.vue'export default {  name: 'page',  components: { msg },  data () {    return {      message: 'page-msg'    }  }}</script><style></style>

msg.vue 中

<template>    <div class="msg">        {{ love }}  </div></template><script>export default {  name: 'msg',  props: ['love']}</script><style></style>

这样以后就会发现，实现了把父组件 page 中的数据传递到子组件 msg 中了。

另外，需要强调一下的是，不要在子组件中修改 props 的值，当然修改是有效的，非常不推荐，而且 Vue 也会有警告提示。正确的做法是传递给 data 中的属性或者计算属性。props 中的值是可以通过 this.love 访问到的。

特别注意 props 值是引用类型时的情况，不可以进行简单的赋值，会影响到父组件，正确的做法是进行深拷贝。

子组件向父组件传递数据，通过 events 传递数据。

父组件 page.vue 中

<template>    <div class="page">        page        <msg @passData="getData"></msg>    </div></template><script>import msg from './msg.vue'export default {  name: 'page',  components: { msg },  data () {    return {      message: 'hi'    }  },  methods: {    getData (data) {      console.log(data)    }  }}</script><style></style>

子组件 msg.vue 中

<template>    <div class="msg">    {{ msg }}    <button @click="pass">点击</button>  </div></template><script>export default {  name: 'msg',  data () {      return {          msg: 'hello'      }  },  methods: {      pass () {      this.$emit('passData', 'success')    }  }}</script><style></style>

点击后就会发现 console 出了 'success'。

同级元素之间传递数据，通过 event bus 来传递。

需要引入一个 Vue 实例作为中央总线。page 组件中

<template>    <div class="page">        page        <button @click="changeMsg">click</button>    </div></template><script>import msg from './msg.vue'import { bus } from '../bus.js'export default {  name: 'page',  components: { msg },  data () {    return {      message: 'hi'    }  },  methods: {    changeMsg () {      bus.$emit('change', '666')    }  }}</script><style></style>

footer 组件中

<template>    <div class="footer">        footer    </div></template><script>import { bus } from '../bus.js'export default {  name: 'footer',  data () {    return {      msg: 'hi'    }  },  created () {      bus.$on('change',(data)=>{      console.log(data)    })  }}</script><style></style>

最后发现打印出来了 '666'，这样就实现了。

最后总结一下：

父组件向子组件传递数据，通过 props 传递数据。具体做法只需要在父组件中绑定，在子组件中声明。

?
1
2
3
4
5
6
7
8
9
10
//父组件
<father>
  <child :love="msg"></child>
</father>
 
//子组件
exportdefault{
  ...
  props: ['love']
}

子组件向父组件传递数据，通过 events 传递数据。具体做法时在父组件中监听，在子组件中触发。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<father>
  <child @passData="getData"></child>
</father>
 
//子组件
exportdefault{
  ...
  methods: {
    pass () {
      this.$emit('passData','hi')
    }
  }
}

两个同级组件之间传递数据，通过 event bus 传递数据。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { bus } from './bus.js'//两个组件都要引入
 
//触发事件
exportdefault{
  ...
  methods: {
    passData () {
      this.$emit('communicate','hello')
    }
  }
}
 
//监听事件
exportdefault{
  ...
  mounted: {
    this.$on('communicate', (data) => {
      //...
    })
  }
}

阅读全文

0 0