事件总线实现兄弟组件之间通信
1、在vue的原型上添加属性 $bus,值为一个vue实例化对象
// main.js
Vue.prototype.$bus = new Vue()
2、发送数据的组件通过 this.emit('event',value) 发送数据
<script>
export default {
data(){
return {
msg1:'ChildA组件传给兄弟组件ChildB的值',
}
},
methods:{
send(){
this.$bus.$emit('childv',this.msg1)
}
}
}
</script>
3、在需要接收数据的组件的created生命周期函数通过 this.on('event',(val)=>{}) 监听,在回调函数中进行数据更改,第一个参数‘event’须与发送数据的组件中自定义的事件名称保持一致
<script>
export default {
data(){
return {
msg:''
}
},
created(){
this.$bus.$on('childv',(val)=>{
this.msg = val
})
}
}
</script>
实际上,事件总线的方式可以实现任意嵌套关系的组件互相传值。
通过ref操作dom
在父组件中添加了 ref 属性的元素,父组件可以通过 this.$ refs.属性值 获取对应 dom 元素,如果是组件,则可以获取组件的属性与方法。
// 父组件App
<template>
<div id="app">
<h1 @click="ref">点击通过ref操作组件ChildA</h1>
<ChildA ref="childa" :message.sync="message"/>
</div>
</template>
<script>
import ChildA from './components/ChildA.vue'
export default {
name: 'App',
data(){
return {
message:'父组件的message'
}
},
components: {
ChildA
},
methods:{
ref(){
this.$refs.childa.ref()
},
}
}
</script>
// 子组件ChildA
<script>
export default {
data(){
return {
str:'组件ChildA原来的str'
}
},
methods:{
ref(){
this.str = '组件ChildA被父组件通过ref修改后的str'
},
}
}
</script>
通过.sync语法糖实现子改父
父组件给子组件传值时添加 .sync 修饰符,如<ChildA ref="childa" :message.sync="message"/>
子组件使用 this.$emit('update:属性',value),
如 change(){ this.$emit('update:message','通过.sync语法糖改变后的父组件的message') }
$nextTick
当通过 ref 在同一函数中先改变后获取dom的 html 内容时,可能会因缓存原因无法实时获取,这时要将获取语句写在$nextTick的回调函数中。
<h1 ref="haha">{{message}}</h1> <button @click="get">实时获取message</button>
get(){ this.message = 'newMessage'; this.$nextTick(()=>{ console.log(this.$refs.haha.innerHTML); }) }
axios
// axios 全面写法
axios({
method:'get',
url:'https://cnodejs.org/api/v1/topics',
// get 请求参数使用对象 params,或将参数写在url中
params:{
},
// post 请求参数使用对象 data
data:{
},
headers:{
}
})
.then( ({data:res})=>{
this.list = res.data
})
.catch(err=>{
console.log(err);
})
// axios.get 第一个参数为url 第二个参数为包含请求参数的对象,可不写,将参数写在url中
axios.get(url,{
params:{
}
})
.then( ({data:res})=>{
this.list = res.data
})
.catch(err=>{
console.log(err);
})
// axios.post 第一个参数为url 第二个参数为包含请求参数的对象
axios.post(url,{
username:'admin',
password:'123456'
})
.then( ({data:res})=>{
this.list = res.data
})
.catch(err=>{
console.log(err);
})