Vue组件通信

Vue组件通信的方式

答:组件关系有下面三种：父–>子、子–>父、非父子

(1) 父->子

父向子传递数据通过props

**父组件代码**
<template>
    <header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
  import Header from './header'
  export default {
      name: 'index',
      components: {
          'header-box': Header
      },
      data () {
          return {
              showTitleTxt: '首页'
          }
      }
  }
</script>

**子组件代码**
<template>
    <header>
        
    </header>
</template>
<script>
    export default {
        name: 'header-box',
        props: {
            titleTxt: String
        },
        data () {
            return {
                thisTitleTxt: this.titleTxt
            }
        }
    }
</script>

(2) 子–>父

子组件向父组件传递分为两种类型:

1、子组件改变父组件传递的props（你会发现通过props中的Object类型参数传输数据，可以通过子组件改变数据内容。这种方式是可行的，但是不推荐使用，因为官方定义prop是单向绑定）

2、通过$on和$emit

*通过props实现传递*
**父组件代码**
<template>
    <header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
    import Header from './header'
    export default {
        name: 'index',
        components: {
            'header-box': Header
        },
        data () {
            return {
                showTitleTxt: {
                    name: '首页'
                }
            }
        }
    }
</script>

**子组件代码**
<template>
    <header @click="changeTitleTxt">
        
    </header>
</template>
<script>
    export default {
        name: 'header-box',
        props: {
            titleTxt: Object
        },
        data () {
            return {
                thisTitleTxt: this.titleTxt.name
            }
        },
        metheds: {
            changeTitleTxt () {
                this.titleTxt.name = '切换'
            }
        }
    }
</script>

*通过$on,$emit*
**父组件代码**
<template>
    <div id="counter-event-example">
      <p></p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
    import ButtonCounter from './buttonCounter'
    export default {
        name: 'index',
        components: {
            'button-conuter': ButtonCounter
        },
        data () {
            return {
                total: 0
            }
        },
        methods: {
            incrementTotal () {
                this.total++
            }
        }
    }
</script>

**子组件代码**
<template>
    <button @click="incrementCounter"></button>
</template>
<script>
    export default {
        name: 'button-counter',
        data () {
            return {
                counter: 0
            }
        },
        metheds: {
            incrementCounter () {
                this.$emit('increment')
                this.counter++
            }
        }
    }
</script>

(3)非父子

简单情况下我们可以通过使用一个空的Vue实例作为中央事件总线

**main.js**
let bus = new Vue()
Vue.prototype.bus = bus

**header组件**
<template>
    <header @click="changeTitle"></header>
</template>
<script>
export default {
    name: 'header',
    data () {
        return {
            title: '头部'
        }
    },
    methods: {
        changeTitle () {
            this.bus.$emit('toChangeTitle','首页')
        }
    }
}
</script>

**footer组件**
<template>
    <footer></footer>
</template>
<script>
export default {
    name: 'footer',
    mounted () {
        this.bus.$on('toChangeTitle', function (title) {
            console.log(title)
        })
    },
    data () {
        return {
            txt: '尾部'
        }
    }
}