vue de aprendizaje - La comunicación entre $ emiten y apoyos, así como los componentes no Sons

A, $ emiten uso

Los principales componentes sub pueden utilizar $ emiten desencadenar un evento personalizado del componente padre.

Subcomponentes: distribución al componente de los padres por los componentes personalizados sendCity

<template>
  <div>
    <button @click="handleCity">changeCity</button>
  </div>
</template>

<script>
export default {
  name: 'Children',
  data () {
    return {
      city: '杭州'
    }
  },
  methods:{
    handleCity(){
      // 添加自定义事件，将“杭州”传给父组件
      this.$emit('sendCity', this.city)
    }
  }
}

</script>

componente de los padres:

<template>
  <div>
    <div>{{toCity}}</div>
    <Children @sendCity="sendCity"/>
  </div>
</template>

<script>
import Children from './Children'
export default {
  name: 'father',
  data () {
    return {
      toCity: '上海'
    }
  },
  components:{
    Children
  },
  methods:{
    sendCity(city){// city为$emit的第二个参数
      this.toCity = city
    }
  }
}

</script>

============ "

Dos, el uso de puntales

Puntales padre puede utilizar los datos para el subconjunto.

Escrito tres sub-componentes comúnmente usados ​​puntales de toma disponibles:

A modo: prop aparece en la forma de una matriz de cadenas

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Segunda manera: El valor por defecto del número con

props: {
 list: { type: Number, default: 100 },
}

Tres maneras:

props{
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        // 默认值
        return { message: 'hello' }
      }
    },
    propF: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return []
      }
    }
}

 subcomponentes:

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Children',
  props:{
    list: {
      type: Array
    }
  },
  data () {
    return {
      city: '杭州',
    }
  }
}

</script>

componente de los padres:

<template>
  <div>
    <Children :list="list"/>
  </div>
</template>

<script>
import Children from './Children'
export default {
  name: 'father',
  data () {
    return {
      list: ["时间", "金钱", "生命", "健康"]
    }
  },
  components:{
    Children
  }
}
</script>

, los componentes de comunicación terceros no entre padres e hijos

De esta manera no forma más conveniente de padre-hijo montaje. La comunicación puede resolver problemas sencillos, sin tener la molestia Vuex.

En primer lugar añadir un alojamiento a la Vue prototipo main.js. Como se muestra a continuación.

Vue.prototype.bus = new Vue()

Supongamos que hay dos componentes, conjuntos y componentes de la lista de entrada, que son los componentes de cada hermano. Los datos de entrada a la Lista de montaje de componente emisor.

componentes de entrada:

<button @click="addTitle">add</button>

  data () {
    return {
      title: '时间'
    }
  },
  methods: {
    addTitle(){
      // 调用自定义组件，实现兄弟组件通信
      this.bus.$emit('onAddTitle', this.title)
    }
  }

Lista de componentes:

  mounted(){
    // 绑定自定义组件
    // 用函数的名字是为了解绑一个事件 
    this.bus.$on('onAddTitle', function(title){
      console.log('on add title', title)
    })
  },
  beforeDestroy(){
    // 及时销毁自定义组件，防止造成内存泄漏
    this.bus.$off('onAddTitle', function(title){
      console.log('on add title', title)
    })
  }

Enumerar los componentes montados en el gancho a la llamada, y luego ser destruidas por beforeDestory, impiden la sobrecarga de datos.

Si desea utilizar vuex referirse a mi otro artículo: https://blog.csdn.net/qq_38588845/article/details/104186339