Vue组件学习及Prop传递数据

## Vue组件
### 单文件组件
Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的 **模板(html)、逻辑(js)与样式(css)** 封装在单个文件中。下面是一个单文件组件的示例：
```html
<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style scoped>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

### 组件的组织

![](/media/202209/2022-09-13_172304_164551.png)

组件中可以引用其他组件。

## Props组件交互
组件与组件之间存在交互，如数据等的交互。
Prop可以在组件上注册的一些自定义attributes
props 需要使用 props 选项来定义：
```js
export default {
  props: ['foo'],
  created() {
    // props 会暴露到 `this` 上
    console.log(this.foo)
  }
}
```
除了使用字符串数组来声明 prop 外，还可以使用对象的形式：
```js
export default {
  props: {
    title: ｛
		type: String,
		default: ""
	｝
  }
}
```
任何类型的值都可以作为props的值被传入到子组件中。
父组件中直接通过：
```html
<MyComponent :title="标题名由父组件传到子组件中">
```
### 传递不同的值类型#
在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。
```
props:{
	title: String,
	likes: Number,
	isPublished: Boolean,
	commentIds: Array,
	author: Object,
	callback: Function
}
```

#### Number
```


<BlogPost :likes="42" />

<BlogPost :likes="post.likes" />
```

#### Boolean
```

<BlogPost is-published />

<BlogPost :is-published="false" />

<BlogPost :is-published="post.isPublished" />
```

#### Array
```


<BlogPost :comment-ids="[234, 266, 273]" />

<BlogPost :comment-ids="post.commentIds" />
```

#### Object
```


<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<BlogPost :author="post.author" />
```

#### 使用一个对象绑定多个 prop
如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的 v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：
```js
export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}
```
以及下面的模板：
`<BlogPost v-bind:post="post" />`
而这实际上等价于：
`<BlogPost :id="post.id" :title="post.title" />`

### 单向数据流
所有的props都遵循**单向绑定**的原则，props因父组件的更新而变化，自然地将新的状态向下流到子组件，而不会逆向传递。
> d 子组件中不应更改一个prop，否则vue会报错
```js
export default {
  props: ['foo'],
  created() {
    // ❌ 警告！prop 是只读的！
    this.foo = 'bar'
  }
}
```
**那如何才能更改呢？**
- 通常prop被用于传入初始值；而子组件想在之后将其作为一个局部数据属性，最好新定义一个，从props上获取初始值即可。例如：
```js
export default {
  props: ['foo'],
  data(){
  	return{
		newFoo: this.foo
	}
  }
}
```
- 需要对传入的prop值做进一步的转换，最好是基于该prop值定义一个计算属性。例如：
```js
export default {
  props: ['size'],
  computed: {
  	// 该 prop 变更时计算属性也会自动更新
  	normalizedSize(){
		return this.size.trim().toLowerCase()
	}
  }
  data(){
  	return{
		newFoo: this.foo
	}
  }
}
```

### Prop校验
我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 props 的校验，你可以向 props 选项提供一个带有 props 校验选项的对象，例如：
```js
export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
}
```