Vue2.x Component之间进行数据传递 与 事件监听

假设我们有一个父组件是 App.vue，子组件是Header.vue

父组件->子组件

在App.vue中，主要通过在app-header上绑定属性

<template>
  <div id="app">
    <app-header v-bind:title="title"></app-header>
  </div>
</template>
<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
      title: 'this is my first vue'
    }
  },
  //局部注册组件
  components: {
    "app-header": Header
  }
}
</script>

在Header.vue中，通过props获取对应的属性

export default {
  name: 'Header',
  props: {
      title: {
        type: string,
        required:true
      }
  },
  data () {
    return {
    }
  }
}
</script>

子组件->父组件

子组件使用$emit，第一个参数是事件，第二个是值

<template>
    <div id="header">
        <h1 v-on:click='changeTitle'>{{title}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      title: 'Godfunc'
    }
  },
  methods: {
      changeTitle:function(){
          this.title = 'i am changed';
          this.$emit('titleChanged',this.title);
      }
  }
}
</script>

父组件触发事件方法，接收参数

<template>
  <div id="app">
    <app-header  v-on:titleChanged="updateTitle($event)"></app-header>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
    }
  },
  methods: {
    updateTitle: function(title){
        this.title = title;
        alert(title);
    }
  },
  //局部注册组件
  components: {
    "app-header": Header,   
  }
}
</script>

总结：父组件向子组件传递数据，是通过子组件的属性传递的；子组件向父组件传递数据时，是通过触发事件。

自定义事件进行组件间通信

父组件中

<template>
  <div>
    <app-header ref="head"></app-header>
  </div>
</template>

<script>
import appHeader from './components/AppHeader.vue'
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$refs.head.$on('appEvent', this.addSomething)
  },
  methods: {
    addSomething: function (event) {
      alert(event)
    }
  },
  components: {
    'app-header': appHeader
  }
}
</script>

子组件中

<template>
    <div>
        <button @click="click">添加</button>
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    click: function () {
      this.$emit('appEvent', 'test title')
    }
  }
}
</script>

兄弟组件之间通信与之类似

首先需要定义一个公用的 js文件

import Vue from 'Vue'

export default new Vue()

组件一

<template>
    <div>
        <button @click="click">comp1</button>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
  methods: {
    click: function () {
      console.log(bus)
      bus.$emit('comp1Event', 'this is a msg')
    }
  }
}
</script>

组件二

<template>
    <div>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
  mounted () {
    console.log(bus)
    bus.$on('comp1Event', function (params) {
      alert(params)
    })
  }
}
</script>

转载于:https://www.cnblogs.com/Godfunc/p/8724101.html