常见组件传参方式

VUE中的几种组件传参方式

对于vue来说常见的就是兄弟传值，父子传值

1.父传子

在父组件中定义数据，子组件通过props接收父组件传递的数据加以使用

父组件中

        <div class="box">
            <p>这是父组件</p>
            <son :list="list"></son>
        </div>

子组件中

  props:['list'], //接收到父组件数据

2.子传父

子组件向父组件传递参数

子组件中

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父组件中

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

3.兄弟组件传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus.js

import Vue from 'vue'
export default new Vue()

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

4.通过vux进行组件传值

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num:1,
  },

组件中使用

<templete>
	<div>
		组件A:
		{{$store.state.num}}
	</div>
</templete>
<------------------------------------->
<templete>
	<div>
		组件B:
		{{$store.state.num}}
	</div>
</templete>

这只是最简单的一个vuex使用，可以看到存储在vuex里的数据，在不同的组件中都可以使用

5.通过本地存储进行传值

 	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")


	A组件：
	  localStorage.li='哈哈哈'；//存放字符串或者json字符串
    （如果是ajax返回的json对象，localStorage.li=JSON.stringify(data);  转字符串）

	B组件：
	var str = localStorage.li;  // 哈哈哈
   （如果传的是json字符串，var obj=eval('('+localStorage.li+')'); 转json对象之后再使用）

6.动态路由传参

路由配置：

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

路由跳转：

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

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

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

7.全局变量

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

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

8.通过query传参

路由配置：

{
  path: '/edits',    
  name: 'Edits',
  component: () => import('@/views/edits.vue'),
};

路由跳转：

this.$router.push({
    path : '/edits',        //方式1：通过path跳转
    query : {
        id : 111,
        name : 'zhangsan'
    }
})
 
 
this.$router.push({
    name : 'edits',        //方式2：通过name跳转
    query : {
        id : 111,
        name : 'zhangsan'
    }
)}

页面中使用

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

9.通过params方式传参

路由配置：

{
  path: '/edits',    
  name: 'edits',
  component: () => import('@/views/edits.vue'),
};

路由跳转：

this.$router.push({
    name : 'edits',        //只能通过name跳转
    params : {
        id : 001,
        name : 'zhangsan'
    }
})

页面中使用

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