组件通讯
-父子组件通讯：
- 案例
- 属性验证
- vue提供
- 第三方也有 vue-validate //validator作用就是可以详细书写验证规则
- 现在流行用TS[ typescript ]
-子父组件通讯
-通过自定义事件(事件类型)实现的。
扩展：事件的订阅：app.on('aa',function(){
console.log('aa')
})
事件的发布：app.emit('aa')
-非父子组件通讯
-ref链
思路：通过ref绑定，在父组件里获得子组件的方法，然后在父组件里自定义一个方法 ，
接着把这个方法传给另外的子组件
注意： ref的属性值 可以是任意，为了语义化，用组件名代替
-bus事件总线
bus事件总线思维： 将new Vue()的实例作为一个全局变量 用来联系非父子组件
- 多组件状态共享： Vuex
- 其他
过滤器
-过滤器的作用
对已有数据进行格式化
- 定义方式
全局定义（推荐）
局部定义
-使用：
<img :src = "list.img | imgFilter">
**注释** | 我们称之为"管道符"
imgFilter是过滤器名称，可以传递参数,eg:imgFilter(128.180)
-常见的有
日期
货币
大小写
小数位数保留
格式例如： 全局定义：Vue.filter('imgFilter',function ( val,size ) {
//val就是我们即将要格式化的数据
return val.replace('w.h', size )
})
插槽
作用：用来给未来元素留空间：可以让我们在组件的内容中书写东西。通过<slot></slot>
分类：
---具名插槽
eg: <div id="app">
<Hello>
<!-- 我们肯定想让p显示 -->
<header slot = "header"> 头部 </header>
<p> 这里是hello的内容 </p>
<foote slot = "footer"> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "header"></slot>
<p> 内容 </p>
<slot name = "footer"></slot>
</div>
</template>
---作用域插槽：
- 2.5.x中 我们的作用域插槽使用的是 slot属性
- 2.6.x中 我们的作用插槽用的是v-slot指令
eg:
<body>
<div id="app">
<Hello>
<!-- scope是作用域的意思 -->
<template v-slot:default = "scope">
<p >
{{ scope.money }}
</p>
</template>
</Hello>
</div>
<template id="hello">
<div>
<h3> 作用域插槽 </h3>
<slot :money = "money"></slot>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
// 问题： 我们想将组件的数据用到组件的内容中
new Vue({
el: '#app',
components: {
'Hello': {
template: '#hello',
data () {
return {
money: 2000
}
}
}
}
})
</script>
自定义指令
- 1. 问题： 我们学过那些指令？
- v-bind v-for v-if v-show
- 思考： 当我们打开浏览器时，加载项目时，自动获得搜索框焦点
- 作用：
- 用来操作DOM
- 好处：
- 效率高
- 复用性高
定义方式
- 全局定义
- 局部定义
***** 类是获取Dom性能最低的方式，第二种是属性
## 扩展：
异步组件：
eg:
<body>
<div id="app">
<async-comp></async-comp>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('async-comp',( resolve,reject ) => {
setTimeout(() => {
resolve({
template: '<div> 异步组件 </div>'
})
}, 0);
})
new Vue({
el: '#app'
})
</script>
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
