Vue中的数据交互

父组件与子组件之间传值

1. 父组件向子组件传值，通过prop传值

• 组件中的代码

 <childComponent msg="hello" title="son" />

• 子组件中的代码

 <p>{{msg}}--{{title}}<p/>
props:['msg','title']     //  props是跟data和methods等同级别的

2. 子组件向父组件传值，通过$emit

• 子组件代码

<button @click='possMsg'>子传父</button>
methods:{
    possMsg(){
      this.$emit('showMsg','hello father')    //  第一个参数是父组件中绑定到子组件的事件名，第二个参数是传入父组件的内容
    }
  }

• 父组件的代码

<childComponent @showMsg='showMsg1' />
<p>{{msg}}</p>
data(){
	return{
		msg:''
	}
},
methods:{
    showMsg(val){
     this.msg=val
    }
  }

使用axios实现前后台数据交互

1. 运行：npm i axios vue-axios -S 安装axios
2. 在入口文件(main.js)引入axios和vue-axios

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3. 获取数据：按照下列三种方式

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

3. 发送数据：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用Vuex实现非父子组件之间传递

• 请参考Vue中的Vuex