<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件基础</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<template id="son">
<div>
<h1>my-son</h1>
<h3>{{ title }}</h3>
<button @click="test">test $emit()</button>
</div>
</template>
<template id="father">
<div>
<h1>my-father</h1>
<!-- 监听子组件发射的 test 事件 -->
<my-son title="test props" @test="test"></my-son>
</div>
</template>
<script src="https://vuejs.org/js/vue.js"></script>
<script>
// 一 、新建组件
// 使用组件的第一步就是新建组件
// 全局组件 ：使用 Vue.component() 新建的组件是全局组件
// 局部组件 ：使用 components 属性挂载子组件
// Vue.extend() ：可以新建一个组件对象
// 二 、组件的复用
// 组件的 data 必须是一个函数
// 因为组件复用时使用的是同一个组件实例 ，如果 data 作为一个引用类型的值的话 ，所有的组件将引用同一个 data
// 三 、props 自定义组件特性
// props 属性可以为组件自定义特性
// 当一个值传递给一个 prop 特性的时候 ，它就会变成组件实例的一个属性
// 四 、根元素
// 每个组件只能拥有一个根元素
// 五 、监听子组件事件
// 组件可以使用 $emit() 方法发射一个事件 ，然后在父组件中监听这个事件
// 六 、组件名大小写
// 定义组件名的方式有两种
// 使用 kebab-case ：Vue.component('my-component-name', { /* ... */ })
// 使用 PascalCase ：Vue.component('MyComponentName', { /* ... */ })
// 不管组件名使用的是 kebab-case 还是 PascalCase ，对应的标签名都是 <my-component-name>
// 第一步 ：新建一个 my-son 组件对象
let MySon = Vue.extend({
template: '#son',
// 第四步 ：自定义组件特性
// 使用子组件的时候就可以使用 v-bind 为特性设置值了
props: ['title'],
methods: {
test(){
// 发射一个 test 事件
this.$emit('test')
}
}
})
// 第二步 ：新建一个 my-father 全局组件
Vue.component('my-father', {
template: '#father',
// 第三步 ：使用 components 属性挂载子组件
components: {
MySon
},
methods: {
test(){
alert('说点什么好呢...')
}
}
})
// 第三步 ：定义根组件
new Vue({
}).$mount('#app')
</script>
</body>
</html>
