组件之间的通信之动态属性传递

1.在父组件中，通过import载入子组件
如：import ComA from './components/a'
2.在a.vue中，设置导出模板：
export default{


}


3.在当前父组件中注册子组件：


import ComA from './components/ComA'
import ComB from './components/ComB'
import ComC from './components/ComC'


components:{
ComA :comA,//将引入的ComA赋值给ComA
     ComB,ComC//如果赋值名相同，也可以省略冒号
}


4.在<template>中使用
<com-a></com-a>规则：所有的大写必须全部转成小写，并且以-区分（Vue1.0不识别


大写标签，会报错）


另外，传递的属性也需要该为小写，规则相同
5.通过is引入模板：
<p :is="com-a"></p>
好处：可以在那个位置渲染动态的组件
<p :is="comTorender"></p>
data(){
   return{
comToRender:'com-b'//这里comToRender变为了一个动态的属性
}

}
6.父与子组件进行通信
比如子组件向父组件传递信息：Event:Emit触发或on监听
比如父组件向子组件传递信息:Props：Pass
在父组件中，<p number=8></p>
在子组件中，props：['number'],并且在子组件中可以进行number的渲染
也可以通过this.number获取到从父组件传来的值


注意：属性也是大小写不敏感的，需用-进行区分；
      此时在父组件中number是一个字符串的形式<p number=8></p>
      在子组件中指定类型时，也应该为String，或‘number’：[Number,String]


7.<input type="text" v-model = "myval">
<com-a :my-value = "myVal"></com-a>
//不可以写成<com-a my-value = "myVal"></com-a>
//此时my-value就是一个动态的属性，此处也应该在子组件中进行声明
props:{
'my-value':[Number,String]
}
8.子组件向外传递数据
（1）首先在子组件里面设置一个点击methods
在这个方法中：this.$emit('my-event',this.hello)
表示我们使父组件触发一个事件，名字叫做my-event，并且向这个方法传递一个参数


，即子组件的hello属性
（2）其次在父组件中监听被触发的事件my-event，当这个事件被触发时使其触发父组


件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello


，在这里就可以打印子组件的属性hello的值
9.父组件向子组件传递一个模板元素:插槽
（1）首先在父组件中
<com-a>
<p slot="header">123</p>//这里插入一个模板
</com-a>
（2）在子组件中加入标签<slot name="header">no slot</slot>
//为插槽设置默认值no slot,设置name方便子组件使用时定位