前言
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
方法一 props/$emit
1. 父组件向子组件传值
//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:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
//users子组件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //这个就是父组件中子标签自定义名字
type:Array,
required:true
}
}
}
</script>2. 子组件向父组件传值
// 子组件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值”
}
}
}
</script>
// 父组件
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
// updateTitle($event)接受传递过来的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"传递的是一个值"
}
},
methods:{
updateTitle(e){ //声明这个函数
this.title = e;
}
},
components:{
"app-header":Header,
}
}
</script>3.兄弟传值
在src中新建一个Bus.js的文件，然后导出一个空的vue实例
定义一个点击按钮，点击发送组件B里的数据
在传输数据的一方引入Bus.js 然后通过Bus.emit()的参数形式来传递
<template>
<div class="A">
<button @click="add">A按钮</button>
</div>
</template>
<script>
import bus from "../bus/bus";
export default {
props: [],
data() {
return {
msg: "我是组件A的数据",
};
},
mounted() {},
methods: {
add() {
bus.$emit("add", this.msg);
},
},
};
</script>在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
<template>
<div class="B">
B组件
<h3>{{ data }}</h3>
</div>
</template>
<script>
import bus from "../bus/bus";
export default {
props: [],
data() {
return {
data: "",
};
},
mounted() {
bus.$on("add", (data) => {
this.data = data;
});
},
methods: {},
computed: {},
components: {},
watch: {},
};
</script>4.vuex
简要介绍 Vuex 原理
Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。
在 store/index.js写入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true, // 开启严格模式 确保state 中的数据只能 mutations 修改
state:{
count:0
}
})
export default store;在main.js中引入：
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
}）此时可以在组件中使用 this.$store.state.count 获取store中state的值。如：
<template>
<div class="hello">
<h2>{{count}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$store.state.count;
}
}
}
</script>很多时候咱们要对state里的值进行操作，在vuex提供了一个方法mutations
mutations用法(使用mutations可以修改state的值)
在store/index.js中写入：
state:{
count:0
},
mutations:{ // 更改数据的方法
add(state){
state.count++
},
//提交载荷用法
// add(state,n){
// state.count += n
// },
sub(state){
state.count--
}
}在组件中使用mutations中对应的方法
<template>
<div class="hello">
<button @click="add">+</button>
<h2>{{count}}</h2>
<button @click="sub">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$store.state.count;
}
},
methods:{
add(){
this.$store.commit('add');
},
//提交载荷用法
// add(){
// this.$store.commit('add',10);
// },
//对象风格的提交方式
// store.commit({
// type: 'add',
// n: 10
// })
sub(){
this.$store.commit('sub');
}
}
}
</script>此时就可以对count进行修改了
5.路由传参
在跳转页面的时候，在js代码中的操作如下，在标签中使用标签
this .$router.push({
name: 'routePage' ,
query/ params : {
routeParams: params
}6.localStorage和sessionStorage
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem(“key”, “value”); localStorage.setItem(“site”, “asd”);getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem(“key”); var site = localStorage.getItem(“site”);
