VUE深度解析

VUE深度解析

ES6语法-var-const-let用法详解

JavaScript只有函数作用域，没有块级作用域。在函数中定义的变量有作用域，而在代码块（如if、for）中定义的变量没有作用域。ES6引入了let和const使变量可以拥有块级作用域。

Vue组件解析

全局组件

全局组件通过Vue.extend()定义后使用Vue.component()注册，任何Vue实例都可以使用。例如：

Vue.component("secondComponent", {
  template: `
    template用于定义组件二合一试图
    测试组件二合一
    测试组件二合一内容
  `
});

局部私有组件

局部组件只能在定义它的Vue实例或父组件中使用。例如：

var app = new Vue({
  el: '#app3',
  components: {
    thirdComponent: {
      template: `
        template用于定义私有组件试图
        测试私有组件
        测试私有组件内容2
      `
    }
  }
});

父子组件嵌套

父组件可以包含子组件，并通过局部私有的方式定义。例如：

var app4 = new Vue({
  el: '#app4',
  components: {
    parent: {
      template: '#parent',
      components: {
        child: { template: '#child' }
      }
    }
  }
});

父子组件间数据定义和访问

父组件和子组件的数据可以通过以下方式进行访问：

• 父组件使用this.$children获取子组件数据。
• 对子组件设置ref属性，父组件通过this.$refs快速访问。
• 子组件可以使用this.$parent访问父组件数据。

使用props父组件向子组件传递数据

父组件通过props将数据传递给子组件。子组件中可以对props数据进行校验。例如：

const child = {
  template: '#child',
  props: ['childMsg', 'childAry']
};

子组件的props可以定义数据类型、是否必传、默认值等。

子组件向父组件传播事件

子组件使用$emit触发事件并传递参数，父组件通过v-on监听事件并触发回调函数。例如：

methods: {
  incr() {
    this.count++;
    this.$emit('increment', this.count);
  }
}

整体实现

子组件通过事件通知父组件数据变化，父组件通过监听事件实现实时更新。例如：

changePCounter(counter) {
  this.pCounter = counter;
}

总结

Vue组件具有强大的数据传递和事件处理功能，能够实现父子组件之间的高效通信。如果本文对您有帮助，欢迎关注、点赞、收藏。

想要了解更多内容？

查看原文：VUE深度解析

文章来源：

springboot葵花宝典

扫码关注公众号

2021 年 25 大 DevOps 工具（上）

了解更多