1.注册组建的基本步骤
组件的使用分成三个步骤：1.创建组件构造器 2.注册组件 3.使用组件
2.全局组件和局部组件
当我们通过调用Vue.component()注册组件时，组件的注册是全局的
?这意味着该组件可以在任意Vue示例下使用。
? 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
3.vue组件模板分离写法（以后开发常用这种写法）
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from ‘./components/Hello‘
export default {
name: ‘app‘,
components: {
Hello
}
}
</script>
<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4.父子组件之间的通信
（1）子组件是不能直接引用父组件或者Vue实例的数据的
（2）父组件向子组件传值：父组件通过属性的方式将值传递给子组件，子组件内部通过props接收传递过来的值
（3）子组件向父组件传事件：子组件通过自定义事件向父组件传递信息，父组件监听子组件事件
注意：props属性名的规则，在props中使用驼峰的形式，则在模板中需要使用短橫线的形式。
组件的data属性必须是一个函数。
父传子：
<!--父组件-->
<template>
<div>
<h2>父组件</h2>
<Child-one :parent-message="parentMessage"></Child-one>
</div>
</template>
<script>
import ChildOne from ‘./ChildOne‘;
export default{
name:"ParentOne",
components: {
ChildOne
},
data() {
return {
parentMessage: ‘我是来自父组件的消息‘
}
}
}
</script>
<style scoped></style>
<!--子组件-->
<template>
<div>
<h3>我是子组件一</h3>
<span>{{parentMessage}}</span>
</div>
</template>
<script>
export default{
name:"ChildOne",
props: {
parentMessage：{
type:String,
default:true
}
}
}
</script>
<style scoped></style>
子传父：
<!--父组件-->
<template>
<div>
<h2>父组件</h2>
<Child-one @childEvent="parentMethod"></Child-one>
</div>
</template>
<script>
import ChildOne from ‘./ChildOne‘;
export default{
components: {
ChildOne
},
data() {
return {
parentMessage: ‘我是来自父组件的消息‘
}
},
methods: {
parentMethod(name, age ) {
console.log(this.parentMessage, {name, age});
}
}
}
</script>
<style scoped>
</style>
<!--子组件-->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default{
mounted() {
this.$emit(‘childEvent‘, { name: ‘zhangsan‘, age: 10 });
}
}
</script>
<style scoped></style>
5.父子组件间的访问方式（了解）
父组件访问子组件：使用$children(访问全部子组件)或$refs(访问部分子组件)
子组件访问父组件：使用$parent
6.非父子组件通信
可以用vuex的store来管理状态，在你的项目中用store来管理加入购物车的物品信息，实现了详情页和购物车页的通信，多做项目去体会
7.插槽slot
我们定义的组件通常会被用到各个地方，但是并不一定能够满足所有的使用场景，有时候我们需要
进行一些功能的扩展。这时候就需要用到slot了。一句话描述slot:就是用来在组件中插入新的内容。
例如：
Child.vue中使用slot
<template>
<div class="container">
姓名：{{name}}
年龄：{{age}}
<button @click ="$emit(‘onClick‘,‘自定义事件‘)" :class = "type">点击</button>
<slot></slot>
</div>
</template>
Parent.vue中扩展功能。插入一段话：
<template>
<div class="container">
<Child @onClick = ‘handleClick‘ :age = age :type = type>
<div>这是通过slot插入的一段话</div>
</Child>
</div>
</template>
如上所示：在Child.vue中使用了slot，在Parent.vue中使用Child时，插入了一段话。
实现了功能的扩展。当然如果需要扩展更多的功能可以使用具名插槽。
8.具名插槽
原文：https://www.cnblogs.com/ai-jiang/p/vue-2.html