说明
定义好 全局组件 后，可以在多个 Vue实例中使用
创建组件的步骤
- 定义组件
- 注册组件
- 使用组件
案例
实现下图效果：
定义组件
例子：
// 定义组件
var goods = {
template:`
<div>
<img :src="path" width='100'>
<br>
{{name}}
<div v-text="price"></div>
</div>
`, //最外面必须有且只有一个根元素，否则不显示。``是模板符号，可以换行
data: function(){ //组件中的data，必须是函数，且返回对象.不能直接写对象，否则不可用
return {
name:"小天鹅洗衣机",
price:2000,
path:"img/iphone.jpg"
}
}
}
总结：
template：html代码，每个组件 必须有且只有一个根元素，如果 没有标签 或 有多个标签，不能正常显示，可能会提示错误data：组件中的data，必须是一个函数，且返回对象，不能直接写对象
组件参数：组件是可复用的 Vue 实例，所以它们与 new Vue({}) 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
注册全局组件
下面这种注册方式就是全局组件
Vue.component("组件名字",组件对象)
例子：
//注册组件
Vue.component( "jd-goods" , goods )
使用
全局组件可以在 <div id="app"> 里使用，也可以在 另一个组件中使用
方式一：
<div id="app" >
<jd-goods></jd-goods>
</div>
解释： <jd-goods></jd-goods> 中的 jd-goods就是注册组件的名字
方式二：
<div id="app" >
<jd-goods/>需要由 vue cli脚手架 或 webpark 编译后才能正常运行
</div>
完整例子
<div id="app">
第三步：使用组件
<jd-goods></jd-goods>
<jd-goods></jd-goods>
<jd-goods></jd-goods>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
//第一步：定义组件
var goods = {
template:`
<div>
<img :src="path" width='100'>
<br>
{{name}}
<div v-text="price"></div>
</div>
`, //最外面必须有且只有一个根元素，否则不显示。``是模板符号，可以换行
data: function(){ //组件中的data，必须是函数，且返回对象.不能直接写对象，否则不可用
return {
name:"小天鹅洗衣机",
price:2000,
path:"img/iphone.jpg"
}
}
}
//第二步：注册组件
Vue.component( "jd-goods" , goods )
var vm = new Vue({
el:'#app',//选择器: id 样式、元素选择器等 但元素选择器不能绑定body html元素
data:{
}
});
</script>
总结
定义组件的好处：将功能独立，而且重复使用的代码，封装成一个组件，通过组件可以大量节省重复代码
缺点
数据时 写死在组件中，显示时，数据都是相同的
例子：多个vue实例中使用
<div id="app" >
第三步：使用组件
<jd-goods></jd-goods>
</div>
<div id="app2" >
第二个vue实例
<jd-goods></jd-goods>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
// 第一步：定义组件
var goods = {
template:`
<div>
<img :src="path" width='100'>
<br>
{{name}}
<div v-text="price"></div>
</div>
`, //最外面必须有且只有一个根元素，否则不显示。``是模板符号，可以换行
data: function(){ //组件中的data，必须是函数，且返回对象.不能直接写对象，否则不可用
return {
name:"小天鹅洗衣机",
price:2000,
path:"img/iphone.jpg"
}
}
}
//第二步：注册组件
Vue.component( "jd-goods" , goods )
var app = new Vue({
el: '#app',
data: {//组件中的数据在组件的data中，所以vue中的data就为空
}
})
var app = new Vue({
el: '#app2',
data: {//组件中的数据在组件的data中，所以vue中的data就为空
}
})
</script>
例子：点击事件的组件
<div id="app">
<std-com></std-com>
----------------------
<std-com></std-com>
</div>
<script>
var std_com={
// el:'' //组件中不能写el属性，否则报错
template:`
<div>
<button @click="div">-</button>
<input v-model='num'/>
<button @click="add">+</button>
</div>
`, //最外面必须有且只有一个根元素，否则不显示。``是模板符号，可以换行
data: function(){//组件中的data，必须是函数，且返回对象.不能直接写对象，否则不可用
return {
num:1,
}
},
methods:{
div:function(){
this.num --
},
add:function(){
this.num ++
}
}
}
Vue.component("std-com",std_com)
let vue = new Vue({
el:"#app"
})
</script>