vue基础（二）：组件(props、$ref、$emit、、.native）
prop 着重于数据传递，不能调用子组件里的属性和方法（父->子，传递数据给子组件）。
父组件先绑定自定义属性=要传递的数据，子组件声明props:[父组件的自定义属性名]接受数据
e m i t ( e v e n t , a r g ) 触 发 父 组 件 的 自 定 义 事 件 e v e n t ， 将 参 数 a r g 传 递 给 父 组 件 ， 父 组 件 通 过 @ e v e n t 监 听 并 接 收 参 数 。 使 用 t h i s . emit(event,arg) 触发父组件的自定义事件event，将参数arg传递给父组件，父组件通过@event监听并接收参数。 使用 this. emit(event,arg)触发父组件的自定义事件event，将参数arg传递给父组件，父组件通过@event监听并接收参数。使用this. parent查找当前组件的父组件。
使用 this.$ children查找当前组件的直接子组件，可以遍历全部子组件， 需要注意 $children 并不保证顺序，也不是响应式的。
使用 this. $ root查找根组件，并可以配合 $ children遍历全部组件。
使用 this. $ refs查找命名子组件。
0、组件名
当使用 PascalCase (首字母大写命名) 定义一个组件时，引用时两种命名法都可以使用，也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM 中使用时只有 kebab-case 是有效的。
1、父子组件（子组件：组件模板，父组件：使用页面）
//父组件
<template>
<div>
<h1>我是父组件！h1>
<child>child>
div>
template>
<script>
import Child from '../components/child.vue'
export default {
components: {
Child},
}
script>
//子组件
<template>
<h3>我是子组件！h3>
template>
<script>
script>
父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签的形式嵌进父组件了。
2、props（父->子，传递数据给子组件）
父组件先绑定自定义属性=要传递的数据，子组件声明props:[父组件的自定义属性名]接受数据
注意传递参数时要用—代替驼峰命名，HTML不区分大小写
父组件：
<template>
<div>
<h1>我是父组件！h1>
<child :my-message="message" mm="123">child>
div>
template>
<script>
import Child from '../components/child.vue'
export default {
components: {
Child},
data() {
return {
msg: '我是子组件三！'+ Math.random()
}
}
}
script>
子组件：
<template>
<h3>{
{myMessage}}h3>
template>
<script>
export default {
props: ['myMessage','mm']
// // 方式二：指定数据类型与默认值
// props: {
// myMessage: {
// type: Array,
// default: [5,6,7] //指定默认的值
// }
// }
script>
3、ref（父->子，调用子组件的方法和属性）
ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。
父组件：
<template>
<div>
<h1>我是父组件！h1>
<child ref="msg">child>
div>
template>
<script>
import Child from '../components/child.vue'
export default {
components: {
Child},
mounted: function () {
//console.log( this.$refs.msg);
this.$refs.msg.getMessage('我是子组件一！')
}
}
script>
子组件：
<template>
<h3>{
{message}}h3>
template>
<script>
export default {
data(){
return{
message:''
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
script>
通过ref=‘msg’将子组件child的实例指给$refs，并且通过.msg.getMessage（）调用到子组件的getMessage方法，将参数传递给子组件。
prop和ref之间的区别：
prop 着重于数据传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用（如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。），这个功能比作为索引更常有用到。
4、$emit(事件,值) （子->父，向父组件传入事件名称来触发一个事件）
$emit 方法向父组件传入事件名称来触发一个事件，事件在父组件定义。
e m i t 实 现 ∗ ∗ 子 组 件 向 父 组 件 通 信 ∗ ∗ 。 触 发 当 前 实 例 上 的 事 件 ， 附 加 参 数 都 会 传 递 给 监 听 器 回 调 : 子 组 件 t h i s . emit 实现**子组件向父组件通信**。触发当前实例上的事件，附加参数都会传递给监听器回调:子组件this. emit实现∗∗子组件向父组件通信∗∗。触发当前实例上的事件，附加参数都会传递给监听器回调:子组件this.emit(evevt,arg),父组件@event=“XX” ，父组件methods:{XX(arg){}}。
vm.$emit( event, arg )
父组件：
<template>
<div>
<h1>{
{title}}h1>
<child @returnBack="returnBack">child>
div>
template>
<script>
import Child from '../components/child.vue'
export default {
components: {
Child},
data(){
return{
title:''
}
},
methods:{
returnBack() {
//随便什么
},
}
}
script>
子组件：
<template>
<div class="header">
<a class="backBtn" @click="returnBack"><i class="icon-back">i>a>
<h3 class="pageTitle">子组件标题}h3>
div>
template>
<script>
export default {
methods: {
returnBack(){
this.$emit('returnBack')
}
}
}
script>
5、父组件用绑定属性的方式把方法传入子组件中 在子组件里直接调用这个方法（子->父）
<template>
<div class="parent">
<child :fatherMethod='fatherMethod'>child>// 父组件把方法传入子组件中，在子组件里直接调用这个方法
div>
template>
<script>
import child from '../base/child'
export default {
methods:{
fatherMethod() {
alert('我是父组件的know方法');
}
},
components:{
child
}
}
script>
<template>
<div class="child" @click='childClick'>
div>
template>
<script>
export default {
props:{
fatherMethod: {
type: Function,
default: null
}
},
methods:{
childClick(){
this.fatherMethod()
}
}
}
script>
6、通过 $parent直接 获取父组件数据和调用父组件方法（子->父）
<template>
<div class="parent">
<child>child>
div>
template>
<script>
import child from '../base/child'
export default {
data() {
// 组件的data必须是函数
return {
msg:'父组件数据测试'
}
},
methods:{
fatherMethod() {
alert('我是父组件的方法')
}
},
components:{
child
}
}
script>
<template>
<div class="child" @click='childClick'>
div>
template>
<script>
export default {
data() {
return {
}
},
methods:{
childClick(){
this.$parent.fatherMethod()
console.log(this.$parent.msg)
}
}
}
script>
7、< solt >插槽，承载分发内容的出口
Vue.component('Vbtn',{
template:''});
var Vcontent={
template:'删除 '
}
var Vheader={
template:'播放 '
}
8、.native获取子组件的原生事件
var Vcontent={
template:'删除 ' ,
methods:{
add(){
alert(1);
}
}
}