vue数据传递 <非父子>

2019年5月28日23:25

4-1 组件注意的细节

• 组件里的data 必须是个函数 return {}

• ref 的两种情况

  • 非组件 : this.$refs.xxx 获取的是dom
  • 组件里 : this.$refs.xxx 获取的是子组件的引用

4-2 父子组件传递

图片来源慕课网 侵权删

• 父子组件

• 非父子组件 vuex解决 学习成本高

  • 爷孙组件
  • 兄弟组件

  
  
  
    
    
  
  
  
    
  非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)
    
    
  
  
  
    
  

  报错
  
  其实就是单向数据流 - 子组件不能修改父组件传递过来的值 所以data里做个copy就好了

Vue.prototype.bus = new Vue()

    Vue.component('child',{
        props:{
            content:String
        },
        data(){
            return {
                selfContent:this.content
            }
        },
        template:'
{{selfContent}}
',
        methods:{
            handleClick(){
                // alert(this.content)
                this.bus.$emit('explode_func',this.selfContent)
            }
        },
        mounted:function(){
            var _that = this
            this.bus.$on('explode_func',function(msg){
                alert(msg) //这里会跳出两次 以为组件有两个 都监听了方法
                _that.selfContent = msg
            })
        }
    })

    var app = new Vue({
        el:"#app"
    })

发布订阅/观察者模式 这两个模式 其实小程序写多了自然就特别容易理解

• 其实还是得理解 暴露函数 跟监听函数 也就是子传父的理解 多写写练练 就熟悉了