$emit()和$refs的扩展（$refs调用父组件methods中的方法、dom元素）

$emit()和$refs的扩展

上代码

• @change=“onChange”
  *（这个@change就是父组件中====this.$emit(‘change’, res)）*

子组件中

<BpmnModeler id="bpmn" ref="bpmn" :xml="diagramXML" @change="onChange">BpmnModeler>

downloadBpmn() {
        // console.log('processDefinition', this.processDefinition)
        this.$refs.bpmn.saveXml()
      },

父组件BpmnModeler 中

methods: {
      saveXml() {
        this.bpmnModeler.saveXML({ format: true }).then((res) => {
          // console.log(res)
          this.$emit('change', res)
        })
      }
    }

这里可以看出$refs可以调用父组件中的方法，如一般@submit="onSubmit"时

通过this.$refs.submit()调用父组件上的submit方法

这是可见的@submit。

而上面的this.$refs.bpmn.saveXml()则证明也可以调用methods中的方法

获取dom元素

Vue.js实例学习：获取DOM元素

在Vue中获取DOM元素，我们可以用ref。

用法(和React一样)：
（1）在组件的DOM部分，任意标签中 写上：ref="xxx"
（2）通过组件对象 this.$refs.xxx 获取到元素

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      

        我是按钮    
      
`,
    beforeCreate() {
      //这里不能操作数据
      console.log('beforeCreate: ', this.$refs.btn);
    },
    created() {
      //这里可以操作数据了
      console.log('created: ', this.$refs.btn);
    },
    beforeMount() {
      //new Vue 发生装载， 替换 
之前
      console.log('beforeMount: ', this.$refs.btn);
    },
    mounted() {
      //装在数据之后
      console.log('mounted: ', this.$refs.btn);
    }, 
  };

  new Vue({
    el: '#app',
    components: {
      app: App
    },
    template: ``,
  });
</script>

说明：mounted()时才能获取this.$refs.btn

总结：

$parent： 获取当前组件的父组件
$children：················ 的子组件
$root：获取new Vue的实例
（即上面的：vm）$el: 获取当前组件的DOM元素