关于编译的执行顺序

来源:8-5 event(4)

归来仍是少年呀

2020-10-16

同样是在 processAttrs方法中打debugger,我这先走的竟然是Child标签,然后才是外面的div标签
下面是我在processAttrs方法中输出的el
图片描述
图片描述
下面是main.js文件,看是不是我写的有什么问题???

import Vue from "vue";
import App from "./App.vue";

const Child = {
  template: `
  <button @click="clickHandler($event)">click me</button>
  `,
  methods: {
    clickHandler(e) {
      console.log('button click', e)
      this.$emit('select')
    }
  },
}

new Vue({
  el: '#app',
  components: {
    Child
  },
  template: `
  <div>
    <Child @select="selectHandler" @click.native.prevent="clickHandler"></Child>
  </div>
  `,
  data: {
  },
  methods: {
    selectHandler() {
      console.log('child select')
    },
    clickHandler() {
      console.log('child click')
    },
  }
})
写回答

1回答

ustbhuangyi

2020-10-18

没有问题,因为 processAttrs 是在 processElement 内部执行的,而 processElement 又是在 closeElement 内部执行的,而 closeElement 是解析到闭合标签的时候执行的,所以先处理的内部的 Child,然后再外部的 div

0
1
归来仍是少年呀
知道了,但是你的案例为什么先走的是div标签,div也不是自闭合标签啊
2020-10-19
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4986 学习 · 1038 问题

查看课程