Vue 组件通信

作者: Nian糕 | 来源:发表于2020-05-11 10:28 被阅读0次
    Unsplash
    • 父组件通过 props 给子组件传值
    // App.vue 父组件
    <List :list="list" />
    
    data() {
      return {
        list: [
          {
            id: 'id-1',
            title: 'title-1'
          },
          {
            id: 'id-2',
            title: 'title-2'
          }
        ]
      }
    }
    
    // List.vue 子组件
    <ul>
      <li v-for="item in list" :key="item.id">
        {{item.title}}
        <button>删除</button>
      </li>
    </ul>
    
    props: {
      // 用来接收父组件传给子组件的数据
      list: {
        type: Array,
        default() {
          return []
        }
      }
    }
    
    • 子组件通过 vm.$emit(event, arg) 触发父组件事件
    // App.vue 父组件
    <Input @add="addHandler"/>
    <List :list="list" @delete="deleteHandler"/>
    
    methods: {
      addHandler(title) {
        this.list.push({
          id: `id-${Date.now()}`,
          title
        })
      },
      deleteHandler(id) {
        this.list = this.list.filter(item => item.id !== id)
      }
    }
    
    // List.vue 子组件
    <ul>
      <li v-for="item in list" :key="item.id">
        {{item.title}}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
    
    methods: {
      deleteItem(id) {
        // 调用父组件的事件
        this.$emit('delete', id)
      }
    }
    
    // Input.vue 子组件
    <input type="text" v-model="title"/>
    <button @click="addTitle">添加</button>
    
    methods: {
      addTitle() {
        // 调用父组件的事件
        this.$emit('add', this.title)
        this.title = ''
      }
    }
    
    • 其他组件通过 vm.$on( event, fn ) 进行通信,实例一个 Vue 实例 event 作为媒介,在要相互通信的组件中引入 event
    // event.js
    import Vue from 'vue'
    
    export default new Vue()
    
    // Input.vue
    methods: {
      addTitle() {
        // 调用父组件的事件
        this.$emit('add', this.title)
        // 调用自定义事件
        event.$emit('onAddTitle', this.title)
        this.title = ''
      }
    }
    
    // List.vue
    methods: {
      addTitleHandler(title) {
        console.log('on add title', title)
      }
    },
    mounted() {
      // 绑定自定义事件
      event.$on('onAddTitle', this.addTitleHandler)
    },
    beforeDestroy() {
      // 及时销毁,否则可能会造成内存泄漏
      event.$off('onAddTitle', this.addTitleHandler)
    },
    
    运行结果

    该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue-Communication 上了,有需要的同学可自行下载

    End of File

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

    相关文章

      网友评论

        本文标题:Vue 组件通信

        本文链接:https://www.haomeiwen.com/subject/embknhtx.html