vue中数据交互和传参方式

一、介绍

通过vue-music-app项目，初步熟悉vue中的数据交互和传参方式，此项目中使用到了 vuex，vue-router，props，solt传参方式进行页面传参，以及如何设置代理服务器对访问的ip地址进行管理，并且使用到了vant按需引入轮播图组件。

源码地址

二、传参方式

1、插槽分发内容

定义一个组件，在组件内写入<slot></slot>标签，当调用组件时，组件中如果有内容，则会替换slot标签渲染数据。
新建一个slider组件：

<template>
  <!-- TODO:vue通过ref设置dom元素，通过$refs方法获取此dom节点 -->
  <div class="slider" ref="slider">
    <div class="sliderGroup" ref="sliderGroup">
      <slot></slot>
    </div>
  </div>
</template>

1
2
3
4
5
6
7
8

新建一个recommend.vue组件，调用slider组件

<template>
  <div class="recommend">
    <h2 class="recommendlist">推荐歌单</h2>
    <slider>
      <!-- TODO:使用插槽,通过组件的slot标签，替换数据 -->
      <div v-for="item in slider" :key="item.id">
        {{ item.songName }}
      </div>
    </slider>
</div>
</template>
<script>
import slider from "./slider.vue";
export default {
  data() {
    return { 
      slider: []
    };
  },
  components: {  //调用slider组件
    slider
  },
  methods: {
      getSlider() {  //获取数据存储在slider数组中
        this.$axios.get("http://www.wanandroid.com/tools/mockapi/9664/songlist").then(resp => {
          if (resp.status == 200) {
            this.slider = resp.data;
          }
        });
      },
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

页面效果.png

2、通过props进行父子组件传参

有些时候，我们定义一个组件，在多个地方调用，而所需展示的数据不同，可以通过props传参方式对组件进行页面渲染
新建一个Songlist.vue组件

<!-- 不同数据调用此模板 -->
<template>
  <div>
    <ul>
      <li class="songli" v-for="item in songList" @click="selectSong(item)">
        <div class="songinfor">
          <p class="title">{{item.songName}}</p>
          <p class="singer" style="font-size:12px;color:#888">{{item.singer}}</p>
        </div>
        <p class="start">
          <img src="../../static/img/start.png">
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    props: ["songList"],  //通过props接收父组件传送的数据
};
</script>

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

新建一个recommend.vue,调用子组件SongList

<template>
  <div class="recommend">
      <!-- TODO:动态绑定数据songList数据，子组件通过props接收数据 -->
    <songList :song-list="songList"></songList>  
    	
  </div>
</template>
<script>
import songList from "./Songlist.vue"
export default {
  data() {
    return { 
      songList: []
    };
  },
  components: {
    songList,
  },
  methods: {
    getSongList() {
      this.$axios.get("http://www.wanandroid.com/tools/mockapi/9664/recommend").then(resp => {
        if (resp.status == 200) {
          this.songList = resp.data;
        }
      });
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

页面效果.png

新建一个Hot.vue组件，也调用子组件Songlist

<template>
  <div id="hot">	
		<div class="banner">
			热门歌曲
		</div>
        <!-- 动态绑定数据hotList数据 -->
		<songList :song-list="hotList"></songList>
	</div>
</template>

<script>
import songList from "./Songlist.vue"
    export default {
        		data() {
			return {hotList: []}
		},
		methods: {
			getHotList() {
				 this.$axios.get("http://www.wanandroid.com/tools/mockapi/9664/recommend").then(resp => {
					 
                    if (resp.status == 200) {
                    	this.hotList = resp.data;
                    }
                });
			}
        },
        mounted() {
            this.getHotList()
        },
        components: {
            songList
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

页面效果.png

3、使用vue-router进行页面传参

点击某个菜单项，跳转到另一个组件页面时可以使用vue-router进行传参
对路由进行配置
在songList组件添加点击事件跳转查看详情页

<!-- 不同数据调用此模板 -->
<template>
  <div>
    <ul>
      <li class="songli" v-for="item in songList" @click="selectSong(item)">
        <div class="songinfor">
          <p class="title">{{item.songName}}</p>
          <p class="singer" style="font-size:12px;color:#888">{{item.singer}}</p>
        </div>
        <p class="start">
          <img src="../../static/img/start.png">
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    props: ["songList"],
    methods: {
        selectSong(item) {
            // 直接调用$router.push,实现携带参数的跳转
            // this.$router.push({
            //     "name" : "Detail",  //发送跳转页面名字
            //     "params" : {item,item} //TODO: 通过路由的params进行传参
            // })
            this.$router.push({
                "path": "/detail/:item",
                "query": {item: JSON.stringify(item)}  //TODO: 通过路由的query进行传参
            })
        },
    }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

新建detail.vue组件，接收页面传参

<template>
    <transition name="slider">
        <div class="detail">
                <div class="songimg">
                    <img :src="songDetail.songImgSrc">
                </div>
                <div class="songtitle">
                    {{songDetail.songName}}
                </div>
                <div class="songaudio">
                    <audio autoplay="autoplay">
                        <source src="static/song/song.ogg" type="audio/ogg" />
                        <source src="static/song/song.mp3" type="audio/mpeg" />
                    </audio>
                </div>
            </div>
    </transition>
</template>
<script>
    export default {
        data() {
            return {
                songDetail: {}
            }
        },
        mounted () {
            //TODO:parmas传参不可以刷新，会丢失数据，query可以刷新页面
            // console.log(this.$route.params) //$route接收传递的参数
            // this.songDetail = this.$route.params.item  //TODO: params接收路由传递的参数
            this.songDetail = JSON.parse(this.$route.query.item); //TODO: query接收路由传递的参数
        },
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

4、使用vuex进行数据管理

使用vuex可以更好的管理数据状态，使数据得到共享
安装vuex npm install vuex --save
新建store文件夹，同一组织store文件

(1) 在main.js引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/index'  //导入store主文件index

Vue.prototype.$axios = axios  //将axios添加到vue的原型上，所有vue实例上都可以使用axios

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,  //添加在vue实例上
  router,
  components: { App },
  template: '<App/>'
})

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

(2) 编写store文件夹

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import state from './state'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex)

export default new Vuex.Store({
    getters,
    state,
    mutations,
    actions
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

state.js //数据管理

const state = {
	song: {}
}
export default {
    state
}

1
2
3
4
5
6

getters.js //管理数据状态，相当于computed(计算)属性

const getters={
  getSong(state){
    return state.song;
  }
}
export default getters;

1
2
3
4
5
6

actions.js //提交数据变化，一把用于异步获取数据，相当于methods(方法)属性

import types from './types.js'
import axios from 'axios'

const actions = {
  getSongAsync({commit,state}) {
    axios.get("/recommend/").then(resp => {
      if (resp.status == 200) {
        commit(types.GET_SONG, resp.data);  //提交突变
      }
    });
  }
}

export default actions;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

mutations.js //改变数据状态，也就相当于对state数据进行更新

import types from './types'

const mutations = {
	[types.GET_SONG](state,data) {
        state.song = data
        console.log(data)
	}
}
export default mutations

1
2
3
4
5
6
7
8
9

types.js //定义方法名常量，管理方法名

const GET_SONG = "GET_SONG"  
export default {
    GET_SONG
}

1
2
3
4

(3) 在detail.vue组件调用state中的数据

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters(["getSong"])  //此数据可以直接在页面模板调用
  },
  created() {
    this.$store.dispatch("getSongAsync");  //页面初始化时发送事件
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11

三、引入Vant

Vant按需引入组件

官方网址

1、安装

npm i vant -S

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

1
2

// .babelrc 中配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

1
2
3
4
5
6
7
8
9
10
11

!注意：配置 babel-plugin-import 插件后将不允许导入所有组件

2、新建--src/vant-components.js按需使用swiper组件

import Vue from 'vue'

import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe).use(SwipeItem);

1
2
3
4
5

3、在main引入vant-components.js即可在所有页面使用引入的组件

引入组件.png

4、此时就可以在vue组件中使用vant的swipe组件了

使用组件.png

四、配置代理服务器

编译打包前要做的事

1、修改文件--config/index.js

找到build中assetsPublicPath选项进行修改

2、修改文件--config/index.js，进行代理服务器配置

找到dev中的proxyTable进行代理服务器配置，统一管理接口

proxyTable: {
  '/song': {  //匹配项,放在项目调用中
    target: 'http://www.wanandroid.com/tools/mockapi/9664/songlist', // 接口域名
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, //是否跨域
    pathRewrite: { //重写地址
      '^/song': '' //因为接口中没有这个匹配项，所以要重写地址，才能正常访问
    }
  },
}

1
2
3
4
5
6
7
8
9
10

3、修改文件--build/utils.js

找到ExtractTextPlugin.extract，添加publicPath选项

if (options.extract) {
    return ExtractTextPlugin.extract({
      publicPath: '../../',  //TODO:css中用到资源时需要加的属性
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }

1
2
3
4
5
6
7
8
9

← vue-cli3 项目创建-配置-发布 vue项目如何部署在后台服务器上 →

# 一、介绍

# 二、传参方式

# 1、插槽分发内容

# 2、通过props进行父子组件传参

# 3、使用vue-router进行页面传参

# 4、使用vuex进行数据管理

# (1) 在main.js引入store

# (2) 编写store文件夹

# (3) 在detail.vue组件调用state中的数据

# 三、引入Vant

# Vant按需引入组件

# 1、安装

# 2、新建--src/vant-components.js按需使用swiper组件

# 3、在main引入vant-components.js即可在所有页面使用引入的组件

# 4、此时就可以在vue组件中使用vant的swipe组件了

# 四、配置代理服务器

# 编译打包前要做的事

# 1、修改文件--config/index.js

# 2、修改文件--config/index.js，进行代理服务器配置

# 3、修改文件--build/utils.js

一、介绍

二、传参方式

1、插槽分发内容

2、通过props进行父子组件传参

3、使用vue-router进行页面传参

4、使用vuex进行数据管理

(1) 在main.js引入store

(2) 编写store文件夹

(3) 在detail.vue组件调用state中的数据

三、引入Vant

Vant按需引入组件

1、安装

2、新建--src/vant-components.js按需使用swiper组件

3、在main引入vant-components.js即可在所有页面使用引入的组件

4、此时就可以在vue组件中使用vant的swipe组件了

四、配置代理服务器

编译打包前要做的事

1、修改文件--config/index.js

2、修改文件--config/index.js，进行代理服务器配置

3、修改文件--build/utils.js