<div id="app"><!-- 3.引用组件 --><component-a></component-a>
</div><script>
// 1.创建组件
var ComponentA = { template: `<div>hello vue</div>` }new Vue({el: '#app',// 2.注册局部组件components: {'component-a': ComponentA,}
})
</script>

<div id="app"><!-- 2.引用组件 --><component-a></component-a>
</div><script>
// 1.创建全局组件
Vue.component("component-a", {template: `<div>hello vue</div>`
})new Vue({el: '#app'
})
</script>

<div id="app"><!-- 2.引用组件 --><component-a></component-a>
</div><script>
// 1.创建全局组件
Vue.component("component-a", {data: function(){return {message: "hello vue"}},template: `<div>{{message}}</div>`
})new Vue({el: '#app'
})
</script>

<div id="app"><!-- 3.引用组件 --><goods-item title="原装正品 iphone x" price="10000"></goods-item><!-- 4.再次引用组件--><goods-item title="假一赔十 iphone 8" price="8000"></goods-item>
</div><script>
// 1.创建商品组件
Vue.component("goods-item", {// 2.定义propsprops: ["title", "price"],template: `<div><h4>{{title}}</h4><p>{{price}}</p></div>`
})new Vue({el: '#app'
})
</script>

<div id="app"><!-- 3.引用组件 --><goods-item :goods="{title: '原装正品 iphone x', price: '10000'}"></goods-item><!-- 4.再次引用组件--><goods-item :goods="{title: '假一赔十 iphone 8', price: '8000'}"></goods-item>
</div><script>
// 1.创建商品组件
Vue.component("goods-item", {// 2.定义propsprops: ["goods"],template: `<div><h4>{{goods.title}}</h4><p>{{goods.price}}</p></div>`
})new Vue({el: '#app'
})
</script>

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 匹配任何类型)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}}}
})

<div id="app"><!-- 2.传递事件, buyGoods是事件名 --><goods-item :goods="goods" @buy-goods="buyGoods"></goods-item>
</div><script>Vue.component("goods-item", {props: ["goods"],methods: {// 4.购买事件handleBuy: function(){// 5.主动触发传递的事件this.$emit("buy-goods");}},template: `<div><h4>{{goods.title}}</h4><p>{{goods.price}}</p><!-- 3.新增按钮,添加点击事件 --><button @click="handleBuy">立即购买</button></div>`})new Vue({el: '#app',data: {goods: {title: '原装正品 iphone x',price: 10000}},methods: {// 1.封装购买商品事件buyGoods: function(){alert("购买了商品")}}})
</script>

<div id="app"><goods-item :goods="goods" @buy-goods="buyGoods"></goods-item>
</div><script>Vue.component("goods-item", {props: ["goods"],methods: {handleBuy: function(){// 1.第二个参数可以传数据给父组件this.$emit("buy-goods", { title: this.goods.title });}},template: `<div><h4>{{goods.title}}</h4><p>{{goods.price}}</p><button @click="handleBuy">立即购买</button></div>`})new Vue({el: '#app',data: {goods: {title: '原装正品 iphone x',price: 10000}},methods: {// 2.通过参数接收子组件的数据buyGoods: function(data){alert("购买了商品:" + data.title)}}})
</script>

import Vue from 'vue'export default new Vue()

<template><div><Input @add="addHandler"/><List :list="list" @delete="deleteHandler"/></div>
</template><script>
import Input from './Input' //子组件
import List from './List'  //子组件export default {components: {Input,List},data() {return {list: [{id: 'id-1',title: '标题1'},{id: 'id-2',title: '标题2'}]}},methods: {addHandler(title) {this.list.push({id: `id-${Date.now()}`,title})},deleteHandler(id) {this.list = this.list.filter(item => item.id !== id)}},created() {// eslint-disable-next-lineconsole.log('index created')},mounted() {// eslint-disable-next-lineconsole.log('index mounted')},beforeUpdate() {// eslint-disable-next-lineconsole.log('index before update')},updated() {// eslint-disable-next-lineconsole.log('index updated')},
}
</script>

<template><div><input type="text" v-model="title"/><button @click="addTitle">add</button></div>
</template><script>
import event from './event'export default {data() {return {title: ''}},methods: {addTitle() {// 调用父组件的事件this.$emit('add', this.title)// 调用自定义事件event.$emit('onAddTitle', this.title)this.title = ''}}
}
</script>

<template><div><ul><li v-for="item in list" :key="item.id">{{item.title}}<button @click="deleteItem(item.id)">删除</button></li></ul></div>
</template><script>
import event from './event'export default {// props: ['list']props: {// prop 类型和默认值list: {type: Array,default() {return []}}},data() {return {}},methods: {deleteItem(id) {this.$emit('delete', id)},addTitleHandler(title) {// eslint-disable-next-lineconsole.log('on add title', title)}},created() {// eslint-disable-next-lineconsole.log('list created')},mounted() {// eslint-disable-next-lineconsole.log('list mounted')// 绑定自定义事件event.$on('onAddTitle', this.addTitleHandler)},beforeUpdate() {// eslint-disable-next-lineconsole.log('list before update')},updated() {// eslint-disable-next-lineconsole.log('list updated')},beforeDestroy() {// 及时销毁，否则可能造成内存泄露event.$off('onAddTitle', this.addTitleHandler)}
}
</script>