vue组件传值props bus emit

1.props:
在父组件中引入子组件， 子组件中props:[]或props: {}接收
eg:
父组件中：<child :foo="foo"/>

 components: {
            child 
        },
        data() {
            return {
                foo: '传给子组件'
            }
        }

子组件中

props: ['foo'] 或者
    props: {
        foo: {
            type: String,  // type: [String, Number]
            defalut: ''
        }
    }

2.emit
// 父组件中

// html
    <child @showCityName="updateCity"/>
    // js
    methods:{
      updateCity(cityname){ // 触发子组件
        console.log(cityname) // 得到值‘四川’
      }
    }

子组件中

// html
        <button @click="getmethods">点击</button>
    // js
        methods: {
            getmethods() {
                let cityname = '四川'
                this.$emit('showCityName', cityname) // 对应父组件中子上事件, 传的值
            }
        }

3.bus
1.首先建一个文件bus.js

内容:   import Vue from 'vue'
            const Bus = new Vue()
            export default Bus

2.main.js里面全局注册
    内容:   import Bus from '' 
            Vue.prototype.$bus = Bus

3.使用 
    eg:     1.存入bus中：
                <button @click="abus">click me</button>  
                methods: {
                    abus () {
                        this.$bus.$emit('one', 'adad')
                        this.$router.push('')
                    }
                },
                // 如果两个页面毫无其他关联则需要使用，防止在取出bus时未挂载上
                beforeDestroy () {
                    this.$bus.$emit('one', 'adad')
                }
            2.取出bus：
                data(){
                    return{
                        message:""
                    }
                },
                created() {
                    this.$bus.$on('one', content => {
                        this.$bus.message = content
                        this.$bus.$off('one') // 清除bus
                    })
                },
                mounted() {
                    this.message = this.$bus.message
                }