Vue.js 子组件加载时执行指定方法

在 Vue.js 2.0 中当我们打开子页面的时候，需要立即执行某一方法，可以使用 Vue 的侦听器 watch

本案例是为了实现一个 URL 字符串和分开配置的双向联动，即编译单个选项，如 【物理库类型】、【物理库IP】、【物理库端口】、【物理库服务名称】、【连接参数时】，自动解析成【URL】，同样，直接在【URL】 input 框中输入信息，也可以解析成上面的各项配置，在此遇到一个问题，就是我需要的是在父页面点击【编辑】按钮时，才会打开子页面的编辑表单，希望在这个时候就加载我的 changeURL()方法

image.png

具体思路：

1、在父页面声明一个变量，并通过 props 的方式将其传递到子页面，关键代码如下

<template>
  <div class="app-container">
    <eForm ref="form" :is-add="isAdd"  :tag="tag"/>
  </div>
</template>

export default {
  data() {
    return {
      tag: false      
    }
  },
  created() {

methods: {
  //编辑方法
    edit(data) {
      this.isAdd = false
      this.tag =  !this.tag
      _this.form = {
        dbType: data.dbType,
        driveInfo: data.driveInfo,
        dbIp: data.dbIp,
        dbPort: data.dbPort,
        dbConnParams: data.dbConnParams,
        url: data.url,
      }
      _this.dialog = true
    }
  }

2、在子页面通过【props 】接收父页面传递过来的变量，关键代码如下

export default {
  props: {
    tag: {
      type: Boolean,
      required: true
    }
  },

3、在子页面添加【tag】变量的侦听器，来调用联动的方法 this.changeURL()

watch: {
    tag: function setUrl(oldVal, newVal) {
      debugger
      if (oldVal !== newVal) {
        this.changeURL()
      }
    }
  },