方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1. 父组件向子组件传值
   接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:[“王小虎”,”张三”,”李四”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>

import Users from "./components/Users"

export default {
  name: 'App',
  data(){
    return{
      users:["王小虎","张三","李四"]
    }
  },
  components:{
    "users":Users
  }
}

vuex是什么？

官网的解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools，extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】

安装

1

npm install vuex --save

keep-alive 简介

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
用法也很简单：

1
2
3
4
5

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

使用vue-cli构建的项目，在开发时，想要访问后台接口获取数据，这时就会出现跨域问题。

在config/index.js中进行如下配置

【即在进行ajax请求时，地址中任何以/api开头的请求地址都被解析为目标地址，target就是你想要的后台接口地址】

1
2
3
4
5
6
7
8
9

  proxyTable: {
  '/api': {
    target: 'http://www.leheavengame.com', 
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
  }
}