黑马程序员技术交流社区

标题: 【西安校区】vue 值传递的几种方式及监听值变化 [打印本页]

---

作者: 逆风TO    时间: 2019-12-12 11:09
标题: 【西安校区】vue 值传递的几种方式及监听值变化
1、$emit

2、bus.js

3、vuex

// 父组件
<child @callback="callback" :searchList="searchList"></child>

methods: {
  callback(value) {
    this.selectValue = value
  }
}

// 子组件
methods: {
  onClick(data){
    this.$emit('callback', data);
    console.log(data);
  }
}


// 发给全局
this.$root.$emit('rootback', data)；

// 接收全局的
created() {
  this.$root.$on('rootback', (data) => {
    this.selectValue = data;
  })
}
监听父组件值的变化，props传值

// 子组件

props: {
    newsObject: Object
},
watch: {
        newsObject: {
                deep: true,
                handler(newVal, oldVal){
                        console.log( newVal, oldVal)
                }
        }
}
// 执行ref="child"的子组件的 player方法

bindSonPlay(){
  this.$refs['child'].player();
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2