Vue.js组件通信，ajax的简单demo

 

简介：

利用ajax向我写好的接口发送请求在把json 数据做一个解析展示，有错请指出，在此谢过

思路：所在查询按钮的那个组件进行ajax请求，返回一个json 数组，把这个数据传递到父组件中，父组件在把数据传到List这个子组件中，在用一个v-for 把数组进行遍历把object数据放到List 的下一个子组件Item 中，进行展示，这里查询按钮所在的组件和List其实是兄弟组件可以用PubSub.JS，进行处理一个利用JavaScript进行发布/订阅的库

效果如下

目录结构如下

先做查询的ajax操作

这里    this.$emit('selectResult', result) 向父组件发送查询到的数组 ，result为查询到的参数，selectResult为一个ID

<template>
	<div class="col-md-4">
        <form class="form-horizontal">
          <div class="form-group">
            <label>比赛名</label>
            <input type="text" class="form-control" v-model="competition" placeholder="比赛名">
          </div>
     
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default pull-right" @click="selects">查询</button>
            </div>
          </div>
        </form>
      </div>
	
</template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	 
	export default {
		data(){
			return{
				competition:''
			}
		},
		methods:{
			selects(){ 
			 //这里发送ajax要json数据
			 const url = 'http://10.10.2.3:8080/android/selectAllByCompetitionName?competitionName='+this.competition
			 axios.get(url).then(response =>{
			 	const result = response.data
			 	//console.log(result)
			 	this.$emit('selectResult', result)
			 }).catch(error =>{
			 	alert(失败了)
			 })
			}
		}
	}
</script>

<style>
</style>

父组件   v-on:selectResult="selectResult" 对子组件传来的selectResult的这个消息做一个监听，同时也会接受到result 这个参数

监听到的同时会调用父组件的selectResult这个函数为父组件的result 赋值，在标签中要把result 这个数组给List这个子组件

<template>
  <div id="app">
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请查询比赛的选手信息</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
    	<Select   v-on:selectResult="selectResult" />
    	<List  :result="result"/>
    	
    	</div>

  </div>
  
</template>

<script>
	import Select from './components/Select'
	import List from './components/List'

export default {

  name: 'App',
  components: {
   List,
   Select
  },
 　data(){
			return{
				result:Array
			}
		},
   methods: {
      selectResult: function (result) {
        // result就是子组件传过来的值
        this.result = result
//        console.log(result)
      }
    }
}
</script>

<style>

</style>

 List 用props做一个接收父组件传递的数组 在Item这个组件做遍历，为每一个Item传递一个 user 对象

<template>
	<div class="col-md-8">
        <h3 class="reply">选手列表：</h3>
        <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
        
        <ul class="list-group">
         <Item  v-for="(user,index) in result" 
         :key="index" :user="user"/>
        </ul>
      </div>
	
</template>

<script>
import Item from './Item'

export default {

  components: {
   Item
  },
  props:{
		//指定了属性名和类型
		result:Array,
			},
}
	
</script>

<style>
	.reply {
  margin-top: 0px;
}

</style>

Item 接收user 这个对象后取出我们想要的数据就好了

<template>
	<div>
	     <li class="list-group-item">
            <div class="handle">
              <a href="javascript:;">删除</a>
            </div>
            <p class="user"><span >{{user.competitorName}}</span><span>说:</span></p>
            <p class="centence">{{user.competitorText}}</p>
            <p class="centence">{{user.usernameSum}}</p>        
          </li>
          </div>
</template>

<script>
	export default {
	
	 props:{
			//指定了属性名和属性值就好比一个json数组
		user:Object
		},
	}
		
</script>

<style>
	li {
  transition: .5s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}
	
</style>