Vue - 组件

组件是可复用的 Vue 实例，都有data、computed、watch、methods 以及生命周期钩子等

组件命名

可在Vue官方提供的代码风格指南中查阅相关命名规则

// PascalCase（驼峰命名）
MyComponent.vue
// 连接符命名
my-component.vue

都可以通过以下两种方式引用组件

<MyComponent></<MyComponent>
<my-component></my-component>

子组件的生命周期

<Home title="父组件">
  <Text title="子组件"></Text>
</Home>

home created
text created
text mounted
home mounted

通过 Prop 向子组件传递数据

子组件通过props属性接收父组件传递的值（传递值的类型：String、Number、Number、Array、Object、Function）

export default {
  props: ['title'],
  data () {
    return {
      text: '077'
    }
  },
  created() {
    console.log(this.title, this.text) // 通过this调用props与data中的变量
  },
}

// 子组件中使用props与data中的变量
<div>
  <span>{{ title }}</span>
  <span>{{ text }}</span>
</div>

父组件中使用子组件并传值

<MyComponent :title="title"></<MyComponent>

prop 大小写

// 子组件 驼峰命名
props: ['postTitle']
// 父组件 使用连接线方式调用
<MyText post-title="hello world"></MyText>

prop 类型

// 子组件通过数组字符串接收，没有指定验证
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

上面这种写法行得通，但是不推荐，接收父组件传递的参数最好需要指定的值类型 / 是否必传 / 默认值是什么。这在开发一个会被别人用到的组件时尤其有帮助

props: {
  // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  propA: Number,
  // 多个可能的类型
  propB: [String, Number],
  // 必填的字符串
  propC: {
    type: String,
    required: true
  },
  // 带有默认值的数字
  propD: {
    type: Number,
    default: 100
  },
  // 带有默认值的对象
  // 对象或数组默认值必须从一个工厂函数获取
  propE: {
    type: Object,
    default: function () {
      return { message: 'hello' }
    }
  },
  // 自定义验证函数
  // 这个值必须匹配下列字符串中的一个
  propF: {
    validator: function (value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值.。但是反过来则不行，不应该在一个子组件内部改变 prop。

试图改变一个 prop 的情形：子组件希望对prop数据进行操作或转换，可以使用data或计算属性把它“拷贝”一份再进行操作

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

监听子组件事件

// Home.vue组件
<Home>
  <Text v-on:watch-console="handleConsole"></Text>
</Home>

handleConsole() {
  console.log('Child Call')
}

父组件监听watchConsole，如果子组件触发watchConsole，父组件则调用组件内handleConsole函数

// Text.vue子组件
this.$emit('watch-console')

子组件传递参数，父组件接收

// 父组件接收
handleConsole(params) {
  console.log('Child Call', params)
}

// 子组件传递（参数可以是任意类型）
const params = { a: 1 }
this.$emit('watch-console', params)

事件名：推荐你始终使用 kebab-case 的事件名