前端小白快速入门vue或者复习vue宝典（二）-------组件通信和网络请求

四. 组件通信

4.1 props

父组件 App.vue

<template>
	<div>
		<h1>Hello World</h1>
		<!-- 前面一个msg标识子组件用于接收的变量名, 引号中的msg是当前组件的值 -->
		<Child :msg="msg"/> 
	</div>
</template>
<script>
import Child from './Child.vue'
export default {
    components: {
        Child
    },
	data() {
        return {
            msg: '这个信息来源于父组件'
        };
	}
}
</script>

子组件 Child.vue

<template>
	<div>
		<p>{{msg}}</p>
		<button @click="addItem" />
	</div>
</template>
<script>
export default {
	// 使用props接收父组件传递过来的值
	props: {  
        msg: String
	}
}
</script>

4.2 事件绑定、监听与取值

4.2.1 子组件操作父组件1

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">
     <hr>
     <Child @dosomething="changeValue"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue(value) {
      this.value = value;
    }
  }
}
</script>

子组件 Child.vue

<template>
    <div>
        <button @click="dosomething">子组件按钮</button>
    </div>
</template>

<script>
export default {
    methods: {
        dosomething() {
        	// 调用父组件绑定的事件 dosomething，然后调用changeValue方法，并传值
            this.$emit('dosomething', '猪猪侠');
        }
    }
}
</script>

4.2.2 子组件操作父组件2

父组件App.vue

<template>
  <div>
     <input type="text" v-model="value">
     <hr>
     <Child v-model="count"/>     //或者写v-model:app="count",则子组件对应为props:['app'],  update:app
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      count: 1
    }
  }
}
</script>

子组件Child.vue

<template>
    <div>
        <button @click="dosomething">{{modelValue}}</button>
    </div>
</template>

<script>
export default {
    props: ['modelValue']  // 固定写法
    methods: {
        dosomething() {
            this.$emit('update:modelValue', this.modelValue + 3); // 固定写法
        }
    }
}
</script>

4.2.3 父组件监听子组件

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // 将当前组件中的changeValue方法，绑定到名为changeValue监听事件中，
    // 子组件通过 this.$emit('changeValue', '猪猪侠') 调用父组件的changeValue方法
    this.$refs.child.$on('changeValue', this.changeValue);
  },

  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue(value) {
      this.value = value;
    }
  }
}
</script>

子组件 Child.vue

<template>
    <div>
        <button @click="dosomething">子组件按钮</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '猪猪侠'
        }
    },
    methods: {
        dosomething() {
            this.$emit('changeValue', '猪猪侠');
        }
    }
}
</script>

4.2.3 父组件取子组件中的值

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value">&nbsp;&nbsp;
     <button @click="changeValue">取子组件的值</button>
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    changeValue() {
      this.value = this.$refs.child.value;
    }
  }
}
</script>

子组件 Child.vue

<template>
    <div>
        <p>我是子组件，我中间定义了一个value='猪猪侠'的数据</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '猪猪侠'
        }
    }
}
</script>

4.3 订阅与发布(概念)

​ 订阅与发布(Publish发布、subscribe订阅)可以应用到各种场景之下，不仅仅是父子组件之间，也可以应用于兄弟组件之间。

安装pubsub-js这个类库：

npm install pubsub-js --save

父组件 App.vue

<template>
  <div>
     <input type="text" v-model="value"/>
     <hr>
     <Child ref="child"/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
import PubSub from 'pubsub-js'

export default {
  components: {
    Child
  },
  data() {
    return {
      value: ''
    }
  },
  mounted() {
    PubSub.subscribe('channel1', (msg, value) => {
      this.changeValue(value);
    });
  },
  methods: {
    changeValue(value) {
        this.value = value;
    }
  }
}
</script>
<style>
</style>

子组件 Child.vue

<template>
    <div>
        <button @click="pub">子组件发布消息</button>
    </div>
</template>

<script>
import PubSub from 'pubsub-js'

export default {
    methods: {
        pub() {
            PubSub.publish('channel1', '猪猪侠');
        }
    }
}
</script>
<style>
</style>

4.4 插槽(slot)

​ 插槽的作用说白了就是一个占位的作用。

父组件 App.vue

<template>
    <List>
    	<!--
    	  可以简写为这种形式
    	  <template #title>
    	-->
        <template v-slot:title>
            <h2>插槽案例</h2>
            <button class="btn btn-danger btn-sm">点击</button>
        </template>
        <!--
    	  可以简写为这种形式
    	  <template #title="props">
    	-->
        <template v-slot:item="props">
            <h3>插槽属性</h3>
            <p>属性值：{{props}}</p>
        </template>
    </List>
</template>

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

export default {
    components: {
        List
    }
}
</script>

<style>
    .site-header {
        text-align: center;
    }
</style>

子组件 Child.vue

<template>
    <div>
        <slot name="title"></slot>
        <slot name="item" v-bind="person"></slot> <!-- 组件属性 -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            person: {age: 10, name: 'zhangsan'}
        }
    }
}
</script>
<style>
</style>

五. 网络请求

​ vue2.X版本中，官方推荐的网络请求的工具是axios。

npm install axios vue-axios --save

5.1 配置全局请求地址

​ 新建Base.vue文件，文件内容如下：

<script>
const BASE_URL = "http://localhost:8081"
export default {
BASE_URL
}
</script>

5.2 main.js配置

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Base from './Base.vue'

Vue.use(VueAxios, axios);  //顺序有关系
axios.defaults.baseURL = Base.BASE_URL  //配置基本地址

new Vue({
  render: h => h(App),
}).$mount('#app')

5.3 发送GET请求

this.axios.get('/user'
    /**  可以通过如下方式，添加请求头信息
    ,{
         headers: {
             'token': 'hyfetrrabcpo'
         }
      }
    */
    )
    .then((resp) => {  // 请求成功
      this.users = resp.data;  
    }, (error) => { //请求失败
       window.console.log(error);  //不能直接用console
    })

5.4 发送POST请求

this.axios.post('/user', {name:'zhangsan', id: 10})  //后台必须要用json接收
	.then((resp) => {
			this.users = resp.data;
	}, (error) => {
			window.console.log(error);  //不能直接用console
	})

5.5 发送DELELE请求

this.axios.delete('/user/56')
	.then((resp) => {
			this.users = resp.data;
	}, (error) => {
			window.console.log(error);  //不能直接用console
	})