VUE 组件化

就是将项目**/**页面抽象为一个组件树，针对不同业务来划分组件，vue 组件其实就**是封装好的可复用的**vue**实例。可以**提高开发效率，方便多人开发和维护，方便重复使用

VUE 组件传值

---

组件注册

在 main.js 中全局注册组件

import First from ‘./components/common/First’

Vue.component(‘First’, First)

注意点：

• 组件不能直接访问或使用 Vue 实例(父组件)的 data 数据。
• 组件中也有 data,但组件的 data 必须是函数，数据存放到 return 返回的对象中去。因为函数每次返回的都是一个新对象。所以组件的数据相互之间就不会污染了。

props

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义检验或设置默认值。

// 简单语法
Vue.component("props-demo-simple", {
  props: ["size", "myMessage"],
});

// 对象语法，提供校验
Vue.component("props-demo-advanced", {
  props: {
    // 只检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0;
      },
    },
    info: {
      type: Object,
      default: () => {}, // 引用数据类型默认值，需要写成工厂函数
    },
  },
});

组件传值

---

1. 父传子

为了规范，定义的小驼峰 props，使用时应该写为连字符

• divDataForm ==> div-data-form
• 子组件可以通过 this 访问到父组件传递到  props 里面的值，但是不可以修改，如果要修改，就直接写一个新的变量来处理业务。

• props 传对象，可以只用写自定义事件 传递过来值的数据类型

• 如果传的值   就是静态的数据。就不用 v-bind 动态绑定了。

2. 子传父

$emit

• 子组件通过事件(点击等)，向父组件传递一个自定义事件，和数据。其中传递过来的自定义事件就包含有子组件传递过来的数据

组件访问

1.$chilren

父组件直接通过 this.$children  可以访问到所有得子组件

子组件以文档结构从上到下排列

console.log(this.$children);
console.log(this.$children[0].childdata); //访问data里面的数据
console.log(this.$children[0].show); //methods里面的方法
console.log(this.$children[0]._props); //子组件的父组件通过属性传递过来的值

2. $refs

父通过 ref 访问子组件（常用）

• ref 如果绑定在组件中，那么通过 this.$refs.refsname 获取到的是一个组件对象
• ref 如果绑定在普通元素中，那么通过 this.$refs.refname 获取到的是一个元素对象
• 组件对象都有一个属性$el:用于获取组件中的元素
• 父组件中调用子组件时，给予子组件 ref 属性，ref 的值不可以重复
• 变量需这样调用 –>  this.$refs[变量]

3. $parent

**子组件访问父组件： this.$parent **

每子组件只有一个父组件，所以得到的是个对象，不是数组。

4. 所有组件都继承于 Vue 类的原型

也就是在 Vue 原型中添加对象方法。其他所有的组件都可以使用。

Vue.prototype.otherObject= xxxxxx

通常 会使用 $xx 的格式来命名