Vue.js之组件传递

父→子

父组件通过 props 将数据传递给子组件

//父类页面
<!--1.给组件标签，添加属性的方式，传值-->
<div>
    <Son :title="myTitle"></son>
</div>
​
data(){
return{
myTitle:'黑马程序员'
 }
},
components:{
Son
}

//子类页面
<!--3.渲染使用 -->
我是son组件 {{ title }}
​
<script>
export default {
//2.通过props进行接收
props: ['title']
}
</script>

子→父

子组件利用$emit 通知父组件，进行修改更新

//子类页面
<!--3.渲染使用 -->
我是son组件 {{ title }}
<button @click="changeFn">修改title</button>
<script>
    
export default {
//2.通过props进行接收
props: ['title'],
    changeFn() :{
//1.通过$emit，向父组件发送消息通知
    this.$emit('changeTitle','传智教育')
}
</script>

//父类页面
<!--2.父组件，对消息进行监听-->
<Son :title="myTitle" @changeTitle="handlechange"></Son>
​
data(){
return{
myTitle:'黑马程序员'
 }
},
methods :{
// 3.提供处理函数，提供逻辑
handlechange(newTitle){
    this.myTitle = newTitle
  }
},
components:{
Son
}

获取dom元素

ref 和 $refs

作用:利用 ref和 $refs 可以用于 获取 dom 元素,或 组件实例

特点:查找范围 →当前组件内(更精确稳定)

获取 dom:

1.目标标签-添加 ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.恰当时机, 通过 this.$refs.xxx,获取目标标签

mounted(){
console.log(this.$refs.chartRef)
},

获取组件:(子传父用到)

1.目标组件-添加 ref属性

<BaseForm ref="baseForm"></BaseForm>

2.恰当时机, 通过 this.$refs.xxx,获取目标组件就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法()

Vue异步更新、$nextTick

需求:编辑标题，编辑框自动聚焦

1.点击编辑，显示编辑框

2.让编辑框，立刻获取焦点

this.isShowEdit = true //显示输入框 
this.$refs.inp.focus()  //获取焦点

$nextTick:等 DOM 更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(()=>{
this.$refs.inp.focus()
})