vue learning - Communication between $ emit and props as well as non Sons components

A, $ emit usage

The main sub components can use $ emit trigger a custom event of the parent component.

Subcomponents: distribution to the parent component by custom components 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>

Parent component:

<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>

============》

Two, props usage

Props parent may use the data to the subassembly.

Written three sub-components commonly used props shooting:

A mode: prop listed in the form of an array of strings

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

Second way: The default value of the number with

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

Three ways:

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

 Subassembly:

<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>

Parent component:

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

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

Third, the non-parent-child communication components

In this way non most convenient way of parent-child assembly. Communication can solve simple problems, without having the trouble Vuex.

First add a property to the Vue prototype main.js. As follows.

Vue.prototype.bus = new Vue()

Suppose there are two components, assemblies and components Input List, they are each brother components. Input data to the sending component assembly List.

Input components:

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

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

List components:

  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)
    })
  }

List the components mounted on the hook to call, and then be destroyed by beforeDestory, prevent data overload.

If you want to use vuex refer to my other article: https://blog.csdn.net/qq_38588845/article/details/104186339