$nextTick()
1. 使用原由
由于Vue的数据驱动视图的更新是异步的,也就是在修改数据的当下视图不会立即更新,而是等同一事件循环中所有数据变化完成之后,统一进行视图更新。
2. 使用场景
需要在视图更新之后,基于新的视图进行操作,一般写在created和mounted里面
mounted(){
this.$nextTick(()=> {
this.setCircleHeiht()
})
window.addEventListener("resize",this.setCircleHeiht)
},
methods:{
//设置圆的高度
setCircleHeiht(){
this.largeHeight = this.$refs.largeCircle[0].offsetWidth
this.minHeight = this.$refs.minCircle[0].offsetWidth
}
}
子父组件之间的通信
1. 子组件向父组件传值
主要是通过$emit()进行传递
子组件代码:
<template>
<div>
<h3>这里是childA</h3>
<button @click="_send">给父组件传个消息</button>
</div>
</template>
<script>
export default {
name:'ChildA',
// 方法集合
methods: {
_send(){
this.$emit('send',{nickName:'Lucky'}); //将需要传的值作为$emit的第二个参数进行传递
}
}
}
</script>
父组件代码:
<ChildA @send="touchMe"></ChildA>
<h3>子组件的名字:{{getByChildA}}</h3>
<script>
import ChildA from './ChildA'
export default {
name: 'HelloWorld',
data () {
return {
getByChildA:'',
name:'',
age:'',
msg:''
}
},
components:{
ChildA, //父组件中注册子组件
},
methods:{
touchMe(obj){
this.getByChildA=obj.nickName; //将从子组件中获取的值赋值给变量
}
}
}
</script>
2. 父组件向子组件传值
方式一:在子组件中使用props进行接收父组件传过来的值
子组件代码:
<div>
<h3>这里是childC</h3>
<h3>父组件传过来的值:姓名:{{inputName}} 年龄:{{inputage}}</h3>
</div>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
export default {
//接受父组件传过来的值
props:{
inputName:String, //定义传值类型
inputage:Number
}
}
</script>
注意:props就是一个属性,不能写在data里面
父组件代码:
<!-- 子组件与父组件之间的契合点 -->
<ChildC :inputName="name" :inputage="age"></ChildC>
data () {
return {
name:'cc', //父组件要向子组件传递的值
age:20
}
},
方式二:用this.$refs进行传递,在父组件中引入子组件的时候还需要用ref进行绑定
子组件代码:
<template>
<div>
<h3>这里是childB</h3>
<h3>父组件传过来的值:姓名:{{name}} 年龄:{{age}}</h3>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
export default {
components: {
},
// 定义属性
data() {
return {
name:'',
age:''
}
},
methods: {
//父组件触发子组件的init方法
init(name,age){
this.name=name;
this.age=age;
}
}
}
</script>
父组件代码:
<button @click="getData">父组件给子组件传值</button>
<ChildB ref="myChildB"></ChildB>
methods:{
getData(){
//触发子组件的方法并且传参 init函数名与子组件中的函数名一致
this.$refs.myChildB.init("childB","18")
}
}
运行结果:
初始时:
点击按钮之后: