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

3,092 阅读1分钟

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

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

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

2、发送数据的组件通过 this.bus.bus.emit('event',value) 发送数据

<script>
export default {
    data(){
        return {
            msg1:'ChildA组件传给兄弟组件ChildB的值',
        }
    },
    methods:{
        send(){
            this.$bus.$emit('childv',this.msg1)
        }
    }
}
</script>

3、在需要接收数据的组件的created生命周期函数通过 this.bus. bus.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);
})

1647567143(1).jpg

1647567072(1).jpg