vue.js语法基础（五）

这是vue学习笔记之一，按照自己的思路和理解记得，所以有点乱，如果有疑义或问题的话，欢迎在下方提问相应问题留言~

Style modules下给组件绑定类名

$style.类名 或者 当类用驼峰命名或有其他下划线之类的时候用 $style[‘类名’]注意：<stylemodule></style>//style部分必须加上module关键字,和scoped的作用类似module和scoped，給vue中的類命名的規則，可以直接在每個組件的<style>中加入scoped，也可以用cssmodules的寫法，給類名命名.使用cssmodules時，首先需要在vue-loader.config.js中配置cssModules。如下：表示命名方法（規則）cssModules:localIdentName{:}^{\prime }[path]-[name]-[hash:base64:5{]}^{\prime },camelCase:true然後在每個組件的<style>中加入module字樣最後在使用類名的時候使用綁定的寫法：:class="$style[‘real-app’]“或者
:class=”$style.realApp" (其中style中的真实類名為real-app)

非父子组件中的传值（Bus总线/发布订阅模式/观察者模式）

Vue.protptype.bus= new Vue{}
Bus在子组件中是一个属性，同时他自己又是一个Vue实例，所以可以调用他的emit方法
发送this.bus.$emit(‘change’,this.content)调用方法是携带的数据就是我的内容监听到this.bus.$on(‘change’, 回调函数)
Bus是new的一个Vue实例，所以他有一个emit方法，调用emit方法的时候应该用$符

如果将bus当做原型方法使用，即前面加上$符号，则在使用前要安装插件vue-bus，并在main.js中引入import bus from ‘vue-bus’，使用 Vue.use(bus)
如果把bus作为一个Vue实例来使用，即前面没有$符号的使用，那么它自带$emit、$on方法，如上所示，则不用下载插件

在VUE中使用插槽

< slot ></ slot >
如果子组件里需要展示的内容是父组件的 dom传入过来的，这时候就要用到插槽slot
比如把< p>hello</ p>传到子组件中 父组件（HTML）里写 < child>< p>hello</ p> </ child>
子组件Template: < div> < slot>默认内容 </ slot> </ div> （默认内容会在父组件不往子组件传递内容的时候显示，即传递的内容什么都没有的时候）

< slot>会把父组件中写的dom全都传过来一次，如果写两个< slot>,则所有内容全部传两次.
具名插槽：如果想传两个不同的内容各自传一次，则需要在父组件dom中命名slot=“命名”，和子组件< slot>中.接收名字 name=”命名”，则可以把插入的dom内容和各自的slot对应起来了
作用域插槽
< slot ></ slot >< template>< /template>
当child组件中的内容需要外部来告诉他怎么显示的时候
在子组件模板中写上< slot ></ slot >
父组件中用< template slot-scope=”props”></ template> ”props”属性值可以自己随便定义一个，他的意思是子组件使用slot的时候，子组件可能会往template里面传递一个数据即props
例如
< child> //子组件名字
< template slot-scope=”props”> //定义了一个作用域插槽 template是父组件模板，如果想和子组件的slot内容传值或传递定义的形式就要这么写
< li>{{props.item}}-hello </ li> // item就是从父组件中传过来的数据，在子组件中绑定。就放在”props”属性中，可以直接调用props.item
//li为在父组件定义的slot的显示的形式
</ template>
</ child>