Vue中能使用的最具有实用性传参方式

一、父传子

//父组件
<template>
  <div id="app">
  <Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量
  </div>
</template>
<script>
import Subassembly from '组件路径';
export default {
  components:{Subassembly,//... },//注册
  data() {
    return {};
  },
};
</script>

//子组件
<template>
  <div class="Children">
	{{Properties}}//使用
  </div>
</template>
<script>
export default {
props:{"Properties"},//子组件接收数据,数据可以是数据或对象
  data() {
    return {};
  },
};
</script>

二、子传父

//子组件
 <template>
   <div class="son">
     <button @click="setUser">传值</button>
   </div>
 </template>
 <script>
 export default {
   data(){
     return {
       user:'子传父的内容'
     }
   },
   methods:{
     setUser(){
     //触发transfer方法，this.user 为向父组件传递的数据
       this.$emit('transfer',this.user)
     }
   }
 }
 </script>

//父组件
 <template>
   <div class="parent">
     <p>父组件接收到子组件的内容是：{{ username }}</p>
       <!--son:子组件 监听子组件触发的transfer事件,然后调用父组件getUser方法 -->
     <son @transfer="getUser"></son> 
   </div>
 </template>
 <script>
 //子组件引入
 import son from '子组件路径'
 export default {
   data () {
     return {
       username:'',
     }
   },
   //注册组件
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 </script>

三、事件总线：全局创建$bus

// 方式一、在项目目录下main.js初始化$bus;
window.$bus = new Vue();
//方式二、在src目录下新建一个空的Bus.js文件导出一个空的Vue实例,
//并且在传输数据和接收数据的一方通过import引入Bus.js文件

1、发送事件

<!-- PageOne.vue -->
<template>
   <button @click="sendMsg">-</button>
</template>

<script> 
//方式二 在发送数据的一方引入
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
   //方式一 使用方式
     $bus.$emit("OneMsg", 'PageOne要传输的数据');
   //方式二 
   this.$bus.$emit("OneMsg","PageOne要传输的数据")
   }
 }
}; 
</script>

2、接收事件

<!-- PageTow.vue -->
<template>
 <p>{{msg}}</p>
</template>

<script> 
//方式二 在接收数据的一方引入
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
 //方式一
 //OneMsg：从PageOne发送过来的事件名必须一致
   $bus.$on("OneMsg", (msg) => {
     //msg:则是从PageOne发送过来的参数
     this.msg = msg;
   });
   //方式二：用this.$bus使用,其他与方式一相同
 }
};
</script>

四、Vuex传参

<template>
  <div>
    {{$store.state.token}}
  </div>
</template>
<script>

export default={
  data() {
    return {}
  },
  created(){
    //调用acionts中的方法
    this.$store.dispatch('set_token',12345);
    //调用mutations中的方法
    this.$store.commit('to_token',123456)
  }
}
<script>

1. 高级用法----- 数据持久化
   问题：存储在vuex中的状态，刷新页面，会丢失。
   为了解决刷新页面数据丢失，才有了数据持久化。
   最简单的做法就是利用插件 vuex-persistedState。
2. 安装
   cnpm install vuex-persistedState -S
3. -S 是 --save的简写，意为：把插件安装到dependencies（生产环境依赖）中
   -D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中
   state—>index.js

import Vue from "vue";
import Vuex from "vuex";
import persistence from 'vuex-persistedstate'//数据持久化
Vue.use(Vuex);
export default new Vuex.Store({
//vuex分为以下五大核心
  state: {//存储数据
		token:''
},
  mutations: {//可以修改state中的数据
    	to_token(state,val){
   			state.token=val;
	 }
 },
  actions: {//调用mutations中的方法 异步处理  一般在请求接口时使用 存储数据
    	set_token({commit},val){
    		commit("to_token",val)
 	 }
},
  modules: {},//模块化
  getters: {},//类似于计算属性，对state中的数据进行一些逻辑计算
  plugins: [persistence()],//引入持久化插件
})

五、本地存储

cookie:在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中。大小限制在4k。
localStorage：能保存更大的数据，存储量是5MB，需要手动删除数据，不然会一直保存在浏览器中
sessionStorage：在窗口关闭那一刻，sessionStorage中数据会被清除。存储量是5MB

 window.localStorage.setItem("key", "value")
    window.localStorage.getItem("key")
    //或者写成
    window.localStorage.key="value"
    window.localStorage.key

 window.sessionStorage.setItem("key", value)
    window.sessionStorage.getItem("key")
    //也可简写与以上同理

六、this.$refs传值
1、父组件引用

 import operationLogs from '@/components/cline/operationlog';
 components: {operationLogs},
 <operation-logs ref="operationLog" @success="operationOk"></operation-logs>
  //这是操作弹框要显示的内容不一样 子组件中写了就显示这些值 不写的则显示默认的值   使用
    <operation-logs ref="operationLog" @success="operationOk">
        <el-table-column prop="index" label="序号" width="90"></el-table-column>
        <el-table-column prop="module" label="操作方式" width="170"></el-table-column>
        <el-table-column prop="name" label="操作人" width="160"></el-table-column>
        <el-table-column prop="createtime" label="操作时间" width="160"></el-table-column>
        <el-table-column prop="operate" label width="1" fixed></el-table-column>
      </operation-logs>
      
<view @click="operation(selectRow)" v-if="hasPermission(192)">操作日志</view> 

//操作日志
            async operation(row){
                let than =this
                this.userId = row.id;  //获取id
                const res =await operationLog({userId:this.userId,page:1,size:8})
                let info={}
                if(res){info=res.data}
                //通过refs把值传到子组件
                than.$refs.operationLog.openModal(row.id,row.username,info);  
            },
            //子组件emit给父组件的事件
            async operationOk(item){
                //这是点击分页获取不同的数据 所有后面要重新传新数据过去
                const res =await operationLog({userId:this.userId,page:item.page,size:item.size})
                //拿到值后在把值传给子组件
                this.$refs.operationLog.load(res.data);     
            }

子组件

<template>
  <el-dialog title="操作日志" :visible.sync="showModal" width="35%">
    <div>
      <el-table :data="data" height="430px">
        <slot>  //这里是插槽 组件复用这里的内容可能不一样  solt 里面的是默认的内容
        	<el-table-column prop="index" label="序号" width="90"></el-table-column>
        	<el-table-column prop="typeText" label="操作内容" width="170"></el-table-column>
       		<el-table-column prop="username" label="操作人" width="160"></el-table-column>
        	<el-table-column prop="createTime" label="操作时间" width="160"></el-table-column>
        </slot>
      </el-table>
      <div class="block">
        <el-pagination   //分页控件
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[8,20,30,40]"
          :page-size="pageSize"
          :pager-count=5
          layout="total, sizes, prev, pager, next, jumper"
          :total="length"
        ></el-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer"></div>
  </el-dialog>
</template>

 methods: {
    openModal(userId,userName,info) {
      // console.log(userId,"4125")
      //这是父组件第一次点击打开操作日志弹框拿到的数据
      this.userId = userId;
      this.showModal = true;
        let data =info
        this.data = data.list;
        this.length = data.total;
        this.pageSize = data.pageSize;
        this.pageIndex = data.pageNum;
        data.list.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * this.pageSize + index + 1;
        });
    },
   load(item) {
       //这是点击分页之后拿到的数据
        let data =item
        this.data = data.list;
        this.length = data.total;
        this.pageSize = data.pageSize;
        this.pageIndex = data.pageNum;
        data.list.forEach((item, index) => {
        item.index = (this.pageIndex - 1) * this.pageSize + index + 1;
        });
    },
    
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
		//子组件获取到的分页参数传给父组件
      this.$emit("success",{page:this.pageIndex,size:this.pageSize})
    },
    handleCurrentChange(currentPage) {
      this.pageIndex = currentPage;
      //子组件获取到的分页参数传给父组件
      this.$emit("success",{page:this.pageIndex,size:this.pageSize})
    },
  }

七、动态路由传参

路由配置：

{
  path: '/update/:uid/:name',    //uid参数、name参数
  name: 'Update',
  component: () => import('@/views/update.vue')
};

路由跳转

//如果没有添加对应参数，页面出现404，不会到达对应页面
this.$router.push('/update/111/xiaoming');

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    //进行网络请求...
}

八、query方式

路由配置：

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};

路由跳转(两种方式):

this.$router.push({
    path : '/update',        //方式1：通过path跳转
    query : {
        uid : 111,
        name : 'xiaoming'
    }
})
 
 
this.$router.push({
    name : 'Update',        //方式2：通过name跳转
    query : {
        uid : 111,
        name : 'xiaoming'
    }
)}

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.query.uid;
    let name = this.$route.query.name;
 
    //进行网络请求...
}

九、params方式

路由配置

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};

路由跳转(只有一种方式)：

this.$router.push({
    name : 'Update',        //只能通过name跳转
    params : {
        uid : 111,
        name : 'xiaoming'
    }
})

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    //进行网络请求...
}

十、$parent

$parent 属性可以用来从一个子组件访问父组件的实例

<div id="temp">
	<my-con></my-con>
</div>

Vue.component('my-son',{
	template:'<div>父组件：{{this.$parent.msg}}</div>'
})
new Vue({
  	el:"#temp",
    data:{
		msg:'父组件文本'
	},
    methods:{}
})

十一、$children

他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作

<div id="temp">
   <button @click="getSonText">设置子元素</button>
   <my-con ref="myCon"></my-con>
   <my-con2 ref="myCon2"></my-con2>
</div>
    
Vue.component('my-con',{
	data(){
	    return{
	        sonMsg:'子组件文本 my-con'
	    }
	},
	template:`<div>
	    <div>my-con:{{sonMsg}}</div>
	</div>`,
	
Vue.component('my-con2',{
	data(){
	    return{
	        sonMsg:'子组件文本'
	    }
	},
	template:`<div>
	   my-con2:{{sonMsg}}
	</div>`,
	
	});
new Vue({
    el:"#temp",
    methods:{
        getSonText(){
            console.log(this.$children)
        }
    }
})

十二、全局变量

//在main.js中引入
import Vue from "vue";
Vue.prototype.$variate = {};//全局变量，$符号可以不加

//在页面调用
this.$variate = '全局变量'