Vue 组件数据传递

5月前

LocalStorage、Cookies

获取本地 LocalStorage、Cookies 保存的值,来进行数据的传递,适合简单的个人设置等类似场景。

父子组件

父组件可以使用 props 传递数据给子组件,子组件在数据变化后,给父组件自定义事件发送消息,传递数据。

<div id="app">
    /* 父组件订阅 increment 事件 */
    <counter v-on:increment="incrementTotal" :total="total"></counter>
</div>

<script>
/* 定义 counter 组件 */
Vue.component('counter', {
  template: '<div><button @click="increment">Increment Button</button></div>',
  props: {
        /* 父组件传递的数据 */
        total: {
            type: Number,
            default: 0
        }
  },
  methods: {
      increment () {
          /* 发送消息给父组件 */
          this.$emit('increment')
      }
  }
})

new Vue({
    el: '#app',
    data () {
        return {
            total: 0
        }
    },
    methods: {
        incrementTotal () {
            this.total++
        }
    }
})
</script>

Vue.js 2.3.x 添加一个 .sync 语法糖:

<div id="app">
    <counter :total.sync="total"></counter>
</div>

<script>
Vue.component('counter', {
  template: '<div><button @click="increment">Increment Button</button></div>',
  props: {
        /* 父组件传递的数据 */
        total: {
            type: Number,
            default: 0
        }
  },
  methods: {
      increment () {
          this.$emit('update:total', this.total + 1)
      }
  }
})

new Vue({
    el: '#app',
    data () {
        return {
            total: 0
        }
    }
})
</script>

组件之间

使用 Event Bus 来传递消息

// bus.js
export default new Vue()

// 组件一
import Bus from '../bus.js'
export default {
    data () {
        return {
            total: 0
        }
    },
    mounted () {
        // 订阅 increment 事件
        Bus.$on('increment', () => {
            this.total++
        })
    }
}

// 组件二
import Bus from '../bus.js'
export default {
    mounted () {
        // 发送消息
        Bus.$emit('increment')
    }
}

VUEX

组件有销毁,对应绑定的数据也会销毁,采用 vuex 可以缓存对应数据,保证下次渲染这个组件的状态与销毁前一致,相应的 API 可参考:vuex 文档

评论(13)