Vue如何进行数据传递

1、父子组件父传子

//父组件
<template>
  <div>
    <child :childList='parentList'></child>  //子组件标签
  </div>
</template>

<script>
import child from "./Child.vue";// 引入子组件
export default {
  components: {child},
  data() {
    return {
      parentList：""
    };
  },
};
</script>

//子组件
<template>
  <div>
    {{childList}}
  </div>
</template>

<script>
export default {
  props：['childList']
};
</script>

2、父子组件子传父

//子组件
<template>
  <div>
    <button @click="toparent">传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childList：""
    };
  },
  methods：{
  	toparent(){
  		this.$emit("getList",childList)
  	}
  }
};
</script>

//父组件
<template>
  <div>
    <child @getList="getList"></child>  //子组件标签
  </div>
</template>

<script>
import child from "./Child.vue";// 引入子组件
export default {
  components: {child},
  methods:{
  	getList(val){
  		console.log(val) //val是传递的数据
  	}
  }
};
</script>

3、Bus总线传参

1. 设置bus总线 (Bus.js)

import Vue from 'vue'  //引入vue
export default new Vue({}) //到处一个空的vue实例

2.传递数据的组件

<template>
  <div>
    <button @click="getList">传递数据</button>
  </div>
</template>

<script>
import Bus from './Bus.js'
export default {
  data() {
    return {
      list：""
    };
  },
  methods：{
  	getList(){
  		Bus.$emit("getList",list)
  	}
  }
};
</script>

3. 接收数据的组件

<template>
  <div>
    
  </div>
</template>

<script>
import Bus from './Bus.js'
export default {
  created(){
  	Bus.$on("getList",(val)=>{  //回调获取数据
  		console.log(val)
  	})
  }
};
</script>

4、router路透传参

• 假设现在任意页面要跳转至/index路由组件

• 传递数据一方

<script>
export default {
  methods：{
  	getList(){
  		this.$router.push("/index?属性名="+属性值)
  	}
  }
};
</script>

• 接收数据一方

<script>
export default {
  created(){
  	console.log(this.$router.query)
  }
};
</script>

5、vuex组件通信

• 传递数据一方

<script>
export default {
  data(){
 	 return{
 	 	list:""
 	 }
  },
  methods：{
  	setList(){
  		this.$store.commit("setList",list)
  	}
  }
};
</script>

• vuex中存入数据

export default new Vuex.Store({
  state: {
	  list：""
  },
  mutations: {
	  setList(state,list){
		  state.list = list
	  }
  },
  actions: {
  },
  modules: {
  },
})

• 接收数据一方

<template>
	{{this.$store.state.list}}
</template>

6、vue全局组件
链接: 进入

7、webStorage

sessionStorage 和 localStorage中可以存入数据并且可以在任意页面调用，自身具有setItem、getItem、removeItem方法，统称为webStorage