vue 坑 (this.$refs undefined; 传值 ; router传参; bus.js初次不触发 :src参数没有作用>)

 

Vue.nextTick() this.$refs 报错  undefined;

在Vue生命周期的created(),watch:钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,不然会报错 undefined

路由传参写法:

1.{{00}}

2.路由对应配置 path:'/newdetails/:id',name:"newdetails",

3. this.$router.push({path: '/newdetails',query: {getNewsId: id}})id

4. this.$router.push({name: 'newdetails',parms: {id: id}}) 路由对应配置 path: '/newdetails/:id',name:"newdetails",

组件传值方式

1父组件向子组件进行传值：

父


  data () {
          return {
            name: ''
          }
        }

子
 {{name}}n

  props: {
          name: String,
          required: true
        }

1子组件向父组件进行传值：

 子
{{childValue}}
 
 
   
   
            data () {
              return {
                childValue: '我是子组件的数据'
              }
            },
            methods: {
              childClick () {
                // childByValue是在父组件on监听的方法
                // 第二个参数this.childValue是需要传的值
                this.$emit('childByValue', this.childValue)
              }
            }
父
    
 

    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }

3.非父子组件进行传值

//bus.js
import Vue from 'vue'
export default new Vue()


// 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js

传递
Bus.$emit('val', this.elementValue)

接收
Bus.$on('val', (data) => {
            console.log(data)
            this.name = data
          })

bus.js初次不触发 

原因,接收数据与发送数据必须同时存在,值才能正常传递.发送信息太快,接收数据页面还没有创建,数据不能正常接收.

最好是舍弃这种方法用vuex  或者parms传参

第一种方法
setTimeout(() => {
  bus.$emit('basis', this.id)
}, 30)

第二种方法

    beforeCreate(){
        Bus.$on('modify', (e) => {
            console.log('e---<',e);
            this.name = e.name;
            this.value = e.value
        })
    },
    beforeDestroy() {
        Bus.$off('modify');
    },

 

因为把路径转译为字符串不能正确的识别地址,用require

{url: "",

img: require("../../../assets/images/header-module2.png")

},