前端之Vue day 05 父子通信、ref、动态组件、插槽、计算监听属性
一、父传子
因为组件间数据不共享，所以我们要想办法打通父子之间的数据联系
自定义属性：
在父级中，给在使用的子组件标签加一个自定义的属性，因为要用到data，所以要写成
：自定义属性名='' #注意，不用冒号也能传，但是都是字符串
子组件内注册：
在子组件中，新增一条
props：['自定义属性名','自定义属性名']
用数组套字符串的形式，给父级传过来的自定义属性名注册，这样子组件立刻就可以用了
属性验证：
也可在props的时候，{}内部指定一下数据类型
props:{age:Number,name:String}
注意：
- 不要和子自己data中的变量名冲突，不然子自己的就用不了了，会优先使用子标签属性上传过来的变量的值（优先用父级传过来的）
- 自定义属性名时不要用驼峰，会报错
二、子传父
通过自定义事件
给子标签属性加上自定义的事件，比如说@myfunc=’xxxx‘
xxxx是在父类中的方法，先不写
子标签中，可以给一个函数绑定触发子标签自定义事件的方法
比如说子标签中，有一个按钮，触发子标签内的一个函数，我们就可以在这个函数内写方法，触发自定义事件，并且传参
this.$emit('自定义事件名'，传的参)
这样，子标签中调用一个子标签的事件，会触发子标签定义的自定义方法，并且把数据传过来，在父标签的自定义方法名字绑定的事件中就可以使用被传出来的参
<body>
<div class="myDiv">
<h1>我是根</h1>
<p v-text="hobby">{{hobby}}</p>
<hr>
<xixi :age="age" @myfunc="wawawa"></xixi>
</div>
</body>
<script>
var foo={
template:'<div><p>我是世界的主宰</p><p>|||||姓名：|||年龄：{{age}}</p>' +
'<hr> <button @click="childClick">点我发送子组件数据</button></div>',
data(){
return{city:'changsha',hobby:['song','dance','ball']}
},
methods: {
childClick(){
this.$emit('myfunc',this.hobby)
}
},
props:['age']
}
var vm = new Vue({
el: '.myDiv',
data: {
name: '李小狼', age: 16,
show: false,
city:'shanghai',
hobby:[]
},
methods: {
wawawa(hobby){
console.log(hobby)
this.hobby=hobby
}
},
components:{
xixi:foo
}
})
</script>
三、ref属性快捷实现父子通信（重要）
通过this.$refs可以拿到标签，对象类型
1.放在普通标签上，拿到标签的dom对象
2.放在组件上，拿到的是组件对象（常用）,啥都能点！函数也是！
<child ref="mychild"></child>
methods: {
handClick() {
console.log(this.$refs)
this.$refs.myinput.value='哇，you could really dance'
this.$refs.mychild.name='小樱'
this.age=this.$refs.mychild.age
}
},
// this.$refs.mychild.name='小樱' 控制子组件内部
// this.age=this.$refs.mychild.age 子组件的变量传出来到父组件
四、动态组件
想做一个页面，根据不同的操作显示不同的组件
不使用动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="mydiv">
<h1 class="text-center">商城</h1>
<span>首页</span>|||<span>订单</span>|||<span>商品</span>
<p></p>
<button @click="orderClick">点我换到订单页</button>||||||||||||||||<button @click="goodClick">点我换到商品页</button>
<home v-if="choose==='home'"></home>
<order v-else-if="choose==='order'"></order>
<good v-else></good>
</div>
</body>
<script>
// 定义三个组件
var home={
template:'<div><h1>俺是home页面</h1></div>',
data(){
return{}
}
}
var order={
template:'<div><h1>俺是order页面</h1></div>',
data(){
return{}
}
}
var good={
template:'<div><h1>俺是good页面</h1></div>',
data(){
return{}
}
}
var vm=new Vue({
el:'#mydiv',
data:{
choose:'home'
},
methods:{
orderClick(){
this.choose='order'
console.log(this.choose)
},
goodClick(){
this.choose='good'
console.log(this.choose)
}
},
components:{
home,
order,
good
}
})
</script>
</html>
使用动态组件
<home v-if="choose==='home'"></home>
<order v-else-if="choose==='order'"></order>
<good v-else></good>
上面三行删除，换为
<component :is="choose"></component>
这就是动态匹配，匹配一个变量，变量名是啥，就匹配显示啥组件，别忘了冒号！
keep-alive属性
让用户切换组件时，层级的组件内输入过的文字能活着
var good={
template:'<div><h1>俺是good页面</h1><br><input type="text" value="点击搜索商品"></div>',
data(){
return{}
}
}
_____________________________________
<keep-alive>
<component :is="choose"></component>
</keep-alive>
五、插槽
非指定插槽
子组件中设置好插槽，就可以在使用子组件时随意对插槽插入东西
命名插槽
插槽上写name属性，然后想插入的时候，要给插入的标签属性+slot='名字'
六、计算属性
方法当属性用，一定要有返回值
只要计算属性的函数内部使用的数据发生变化，就会触发计算函数
只有函数体的相关数据发生变化时才会重新执行计算的函数集合
computed: {
sumList() {
console.log('计算属性函数执行了')
let total = 0
for (let num of this.numList) {
total += num
}
return total
}
}
七、监听属性
简单理解就是对data数据进行一个change事件绑定，当数据发生变化时会触发一个函数的执行。
new Vue({
watch:{
属性名(){
// 属性变化时触发的代码
},
}
})
八、vue_cli
一个vue组件就是一个文件
Vue-CLI项目搭建
vue脚手架 可以创建vue
vue脚手架必须要按照 node js 解释型语言
node js 是一门后端语言
今日单词
props:子中接收属性中传过来的变量名，[‘’]的形式，也可以是{}
今日注意
1.自定义属性，属性名不能用驼峰，不然搞不了,但是下划线可以或者小横杠-
前端之Vue day 05 父子通信、ref、动态组件、插槽、计算监听属性的更多相关文章
- Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 简单vue的监听属性(单位换算)
单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue.js：监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
随机推荐
- CAS 悲观锁 乐观锁
前面的偏向锁,轻量级锁,重量级锁都是悲观锁, 都会认为必须要对操作对象进行互斥访问,不然就会产生异常, 所以线程只供一个线程使用,阻塞其他线程,是悲观的 在某些情况下,同步的耗时远大于线程切换的时间, ...
- 2211-14MongoDB学习
学习资源来自菜鸟教程 MongoDB数据库 MongoDB概念解析 不管我们学习什么数据库都应该学习其中的基础概念,在mongodb中基本的概念是文档.集合.数据库,下面我们挨个介绍. 下表将帮助您更 ...
- rosdep update 一直失败问题
1.排除网络问题 2.增加TIMEOUT的时间: 更改 /usr/lib/python2.7/dist-packages/rosdep2/下的三个文件sources_list.py.gbpdistro ...
- python_添加中文编码和脚本
#!/usr/bin/env python 根据环境设置寻找python路径,必须放在第一行 # coding=utf-8 添加中文编码
- css当文字过长时，显示省略号
/* 省略号三属性 */ /* 强制不换行 */ white-space: nowrap; /* 溢出隐藏 */ overflow: hidden; /* 省略号 */ text-overflow: ...
- SX【2020.01.09】NOIP提高组模拟赛(day1)
[2020.01.09]NOIP提高组模拟赛(day1) 这次考得不理想,只做了前两题,后两题没时间做,说明做题速度偏慢. source : 100 + 20 + 0 + 0 = 120 rank7 ...
- JZOJ 3566. 【GDKOI2014】阶乘
题目 求十进制 \(n!\) 在 \(m\) 进制下末尾 \(0\) 的个数 分析 签到题 只要看 \(n!\) 有多少个 \(m\) 的倍数就好了 考虑分解 \(m\) 的质因子 然后根号计算每个因 ...
- Vulhub 漏洞学习之：Dubbo
Vulhub 漏洞学习之:Dubbo 目录 Vulhub 漏洞学习之:Dubbo 1 Aapche Dubbo Java反序列化漏洞(CVE-2019-17564) 1.1 环境安装 1.2 漏洞利用 ...
- Sublime Text 3怎么配置本地服务器？
1. 同样的我们需要借助一款插件来实现. 2.打开Sublime,使用快捷键[Ctrl + Shift + P]或者点击"Preferences"=> "Packa ...
- 使用 UnoCSS shortcuts 简化 class
UnoCSS 确实简化了不少样式书写.也降低了 CSS 打包体积,提升了样式使用率.但样式太多的话,class 也写得多,比较费眼.所幸,UnoCSS 提供了 shortcuts 来简化 class, ...