★★ B VUE系列 六：简单项目中遇到的知识点★★★★

一：问 vue子组件怎么调用父组件的方法

https://segmentfault.com/q/1010000009748858

1. 用$emit向父组件触发一个事件，父组件监听这个事件就行了。

2. 直接用this.$parent.xxxx这样直接调用父组件的方法

涉及到组件之间的通信的问题。组件之间的通信可以分为以下几种：

1. 父子组件传递，父向子传递采用props，子向父采用事件emit

2. 非父子组件的传递，全局Event bus，new一个vue的实例，采用事件的方式通信，再者采用vuex全局状态管理

例子：

//Parent.vue
<template id="">
    <child @refreshList="onRefresList"></child>
</template>

<script>
    export default {
        data () {
            return {
                
            };
        },
        components: {
            Child
        },
        mounted() {},
        methods: {
            onRefresList () {
                
            }
        },
        computed: {},
        watch: {}
    };
</script>

//Child.vue
this.$emit('refreshList');

二：vue2.0 给data对象新增属性，并触发视图更新 

$set 的使用

代码：

data () {
    return {
        student: {
            name: '',
            sex: ''
        }
    }
}
mounted () {
    this.$set(this.student,"age", 24)
}

　　

三：vue在进行页面跳转的时候传递参数。

官网文档 ； https://router.vuejs.org/zh-cn/essentials/navigation.html

四：如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

 五：

出现这个警告问题的时候 我们可以去main.js中在头部添加这句话：

Vue.config.productionTip = false

Vue.config.productionTip = false

 六：/ ./ ../的区别

 

/   网站根路径 

./  当前路径

../ 上一级路径

补充：路径中`@/`代表什么意思，与`./`有何区别呢？

 七：build打包的时候（关闭map文件）

项目目录下自动创建dist目录，打包好的文件都在其中

解决办法：去src/config/index.js中改一个参数：

productionSourceMap:false

把这个改为false。不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

最后你在build之后，然后就会发现就没有自动生成一些map文件了。。。

 八：处理加载失败的图片~~

项目中加载失败的图片 想要用默认图占位展示。遇到几个问题~

查询得知 可以给img 加 @error="errimg" 事件，然后用jq的方式 在errimg函数中处理 ，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题

如图：var r = '../../assets/img/w.png'; 这样写 路径是对了，但就是不显示！！！！！

解决方法：

   一：要把 图片放在把图片放在 static 文件夹中，，看来vue做了某些处理~~~（暂时不i清楚~~，）然后 在data中 写入 logo: '../static/images/logo.png' ，就可以用了。（同时jq也能用这个路径了~）

   二：使用require将图片进入

<img src="/logo.png" :onerror="defaultImg">

data() {
  return {
    defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"'
  }
}

总结：

<img class="m-dtl-head-img" :src="data.mainpicurl" @error="errimg" :onerror="defaultImg" ref="reference">

<img src="../assets/logo2.png">

//img的引入 src 和  :src 有区别
data(){
      return{
         //defaultImg: 'this.src="' + require('../../assets/img/w.png') + '"'
         defaultImg:""
      }
    },

//defaultImg 就可以在 :src 和 :onerror 中 使用了 

var r = '../../assets/img/w.png';
var s = '../static/w.png'
$('.m-dtl-head-img').attr('src',s)//可以正常显示   5.18补充：用jq的方式 处理 ，在手机上不显示 ，看来用 require
$('.m-dtl-head-img').attr('src',r)//不能显示
//jq 

 艾我操：一样的代码，换个地方就不显示错误图片了，废了一大堆的劲，才发现问题-------

此处 返回的结果集中 图片的路径 是null ，所以 onerror 不显示错误图片！！！！！！！换成个错误图片的路径 就显示了！！！这尼玛~那就是说 还要处理 返回结果为空的情况！！！

  九：【Vue】组件 - 多个插槽

 通过关键字来指定

 

 

666