Vue 组件间通信实例

美团的面试 好难 我以为我起码能过 一面 没想到我一面就挂。有些难过。不是 我很难过！！！

看看着周围人 小米 百度 腾讯 我毛都没有。菜狗！

越来越怀疑我适合做前端吗？又在想，是我自己没有认真吧。反正就是自己抽自己吧。

问了我好多，只记得我不会的。

我当时学vue就是脑子冒泡。国庆回家回炉重造。

1、CORS

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

然后看不下去了。再议

2、组件间通信

国庆看

3、store 遇到这个问题 我是真的抽自己的心有。真的有，我背了还久，还是记不住。

action getter module state mutation

actions.js

用于通过dispatch触发的方法

muations.js

用于接收actions通过commit调用对应方法

getters.js

获取从store中的state中的派生出一些状态

4、$(),里面写什么

$("#id")

$(this)

$(document).ready(function(){});

$(this)与this

  那么，我们再回过头来说$(this)，这个this是什么呢？假设我们有如下的代码：

$("#desktop a img").each(function(index){

          alert($(this));

          alert(this);

}

那么，这时候可以看出来：

alert($(this));  弹出的结果是[object Object ]

alert(this);        弹出来的是[object HTMLImageElement]

也就是说，后者返回的是一个html对象(本例中是遍历HTML的img对象，所以为 HTMLImageElement)。很多人在使用jquery的时候，经常this.attr('src');   这时会报错“对象不支持此属性或方法”，这又是为什么呢？其实看明白上面的例子，就知道错在哪里了：

很简单，this操作的是HTML对象，那么，HTML对象中怎么会有val()方法了，所以，在使用中，我们不能直接用this来直接调用jquery的方法或者属性。

。。。。

5、img未加载完前使用JS 

没找到答案

6、实现响应式

使用CSS3 MediaQuery技术编写响应式网页—核心部分

7、promise异步

promise(){

1

}.then(2);

3

1->3->2

这个没说对，不应该 

好像没了。

组件间通信：

父->子：pass props

子->父：emit event

例子：

父组件：App.vue

<template>  <div id="app">    <input type="text" name="toTrans" v-model="toChild">    <p>the massage to child is:{{toChild}}</p>    <Trans :toTrans="toChild" @my-event="fromChild"></Trans>    <p>the data from child is:{{fromChildData}}</p>  </div></template><script>import trans from './components/trans.vue'export default {  name: 'app',  components:{    Trans:trans  },    data(){    return{        toChild:'',        fromChildData:''    }  },  methods:{    fromChild(msg){      this.fromChildData=msg;    }  } }</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  border:1px solid green;    width: 500px;    height: 350px;}</style>

子组件：trans.vue

<template><div id="trans"><p>yes this is trans!</p><p>here get data from father:{{toTrans}}</p><p>he data to father is:{{toFather}}</p><label>to father's data is:</label><input type="text" name="toFather" v-model="toFather"><button v-on:click="fatherMethod">toFather</button></div></template><script type="text/javascript">export default{props:{'to-trans':[String]},data(){return{toFather:''}},methods:{fatherMethod(){this.$emit('my-event',this.toFather);}}}</script><style scoped>#trans{border:1px solid red;width: 400px;height: 200px;}</style>

效果图：

嗯 ，图上有个单词写错了。