一、父传子

因为组件间数据不共享,所以我们要想办法打通父子之间的数据联系

自定义属性:

在父级中,给在使用的子组件标签加一个自定义的属性,因为要用到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、动态组件、插槽、计算监听属性的更多相关文章

  1. Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听

    一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  5. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  6. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  8. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  9. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  10. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

随机推荐

  1. 简单了解C语言如何构建多文件项目

    简单理解C语言如何构建工程 首先我们最好有一个好用的编辑器,vscode也好,visual studio也罢,dev也行,这里我们使用的是code::block: 一.了解C语言工程的构建原理 ​ 首 ...

  2. ES的基本语法

    1 基本使用 使用kibaba来执行语句 es安装和kibaba安装:https://www.cnblogs.com/jthr/p/17075759.html 1)添加PUT 已存在会直接覆盖 PUT ...

  3. spring-in-action_day01

    前景说明:SpringInAction主要致力于SpringBoot为基础的讲解,尽可能多的使用SpringBoot,可以减少显行的配置,如xml配置,可以更加的专注于功能的实现. 第一章:主要讲了如 ...

  4. 2021级《JAVA语言程序设计》上机考试试题5

    这是系统员功能实现,因为使用到了教师,所以教师的Bean与Dao,以及更新的Servlet与service Teacher package Bean; public class Teacher {pr ...

  5. 2.11-12 滴水new-delete-vector(动态数组编写)

    去长沙玩了几天,没学 1.new 与 delete 通过调用分析了解到new在堆区开辟数据 delete就是释放数据 案例 #include<stdio.h> #include <m ...

  6. 精华推荐 |【算法数据结构专题】「延时队列算法」史上非常详细分析和介绍如何通过时间轮(TimingWheel)实现延时队列的原理指南

    时间轮的介绍 时间轮(TimeWheel)是一种实现延迟功能(定时器)的精妙的高级算法,其算法应用范围非常广泛,在Java开发过程中常用的Dubbo.Netty.Akka.Quartz.ZooKeep ...

  7. Cobalt Strike 之: Aggressor Script

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. Co ...

  8. 设备区分判断IPAD,H5,PC

        HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. JS常用默认行为

    form下表示: var forms =document.forms[0]; var forms =document.myform; 找input:var txtName = form.element ...

  10. 若依-更换数据库-sqlite

    基础 我是在ruoyi-vue已经安装了mybatis-plus的基础上进行的修改 关于SQLite SQLite 是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎. ...