黄威龙的笔记

coding 笔记

0%

Vue 传参与watch

发表于 更新于 分类于 阅读次数： Valine：

模块间传参

传参用的字段名不能用驼峰或者下划线,要全小写
到 B页面用 props 声明,字段名要加引号,之后使用方式和 data 声明的变量一样,在 js 内用 this.引用,在 HTML 内直接引用

1
2
// A 模块中引用 B 模块
<videoRegionStatCharts :topicid="topicId" :timestamp="listQuery.timestamp"/>
1
2
3
4
5
6
7
8
9
10
11
// B 模块
export default {
  components: { timePicker },
  props: ['topicid', 'timestamp'],
  data() {
    return {
        listQuery: {
        }
      }
    }
  }

watch 方法

watch 监听的字段不能是 data 声明的字段
用 computed或者 props 声明的字段可以被 watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
props: ['topicid', 'timestamp','regionparam'],
data() {
  return {
    listQuery: {
      region: this.regionparam,
    }
  }
},
computed: { // 这里要监听 this.listQuery.region,不能直接监听 data 声明的变量,要用 computed 声明并返回 this.listQuery.region 实现绑定
  region: function() {
    return this.listQuery.region
  }
},
watch: {
  topicid: function(val) {
    this.listQuery.topicId = val
    this.drawLine()
  },
  region: function(val) { // 这里监听的其实是 this.listQuery.region
    this.$emit('changeRegion', val) // 向父组件传参
  },
  timestamp: function(val) {
    this.listQuery.timestamp = val
    this.drawLine()
  }
}

子组件向父组件传参

1
2
3
4
5
6
<videoRegionStatCharts
  :topicid="topicId"
  :regionparam="listQuery.region"
  :timestamp="listQuery.timestamp"
  @changeRegion="handleChangeRegion"
/>
1
2
3
4
5
6
7
8
9
10
<!--子组件传参-->
region: function(val) {
  this.$emit('changeRegion', val)
}
<!--父组件响应-->
handleChangeRegion(val) {
  this.listQuery.region = val
  this.handleFilter()
}

通过:regionparam向子组件传参,子组件再通过listQuery.region: this.regionparam绑定参数,然后通过 computed 声明一个新变量来监听子组件参数的变化,如果子组件的这个参数变了会通过this.$emit('changeRegion', val)向父组件发送通知,父组件用handleChangeRegion响应子组件的传参
最终实现双向绑定