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>

效果图：

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