Vue事件总线、ref、.sync语法糖、$nextTick、axios基本写法

事件总线实现兄弟组件之间通信

1、在vue的原型上添加属性 $bus,值为一个vue实例化对象

// main.js
Vue.prototype.$bus = new Vue()

2、发送数据的组件通过 this.

b

u

s

.

bus.

bus.emit('event',value) 发送数据

3、在需要接收数据的组件的created生命周期函数通过 this.

b

u

s

.

bus.

bus.on('event',(val)=>{}) 监听，在回调函数中进行数据更改，第一个参数‘event’须与发送数据的组件中自定义的事件名称保持一致

实际上，事件总线的方式可以实现任意嵌套关系的组件互相传值。

通过ref操作dom

在父组件中添加了 ref 属性的元素，父组件可以通过 this.$ refs.属性值 获取对应 dom 元素，如果是组件，则可以获取组件的属性与方法。

// 父组件App





// 子组件ChildA

通过.sync语法糖实现子改父

父组件给子组件传值时添加 .sync 修饰符，如
子组件使用 this.$emit('update:属性',value)，

如 change(){ this.$emit('update:message','通过.sync语法糖改变后的父组件的message') }

$nextTick

当通过 ref 在同一函数中先改变后获取dom的 html 内容时，可能会因缓存原因无法实时获取，这时要将获取语句写在$nextTick的回调函数中。

{{message}}

实时获取message

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);
})