组件传值方式

组件传值

方式一：事件传值

利用this.$emit() 实用 子 -> 父 组件传值，子组件向父级抛出一个事件，父组件来监听该事件

// 子组件 Child.vue
methods: {
    clickEvent() {
        this.$emit('clickEvent', '我被点击了');
    }
}

<!--父组件 HTML-->
<template>
  <div>
    <Child @clickEvent="clickEvent"></Child>
  </div>
</template>

// 父组件
methods: {
    clickEvent(e) {
        console.log(e)  // '我被点击了'
    }
}

 

方式二：属性传值

利用props 实用 父 -> 子 组件传值，子组件创建一个属性，父组件在调用子组件时传入属性值

 

// 子组件
export default {
  props: {
      name: {
          type: String,
          default: ''
      }
  }
}

<!--父组件 HTML-->
<template>
  <div>
    <Child name="xxx"></Child>
  </div>
</template>

 

方式三：URL动态路由

通过路由跳转传值，适用于需要路由跳转的情况

// router -> index.js
const routes = [
  {
    path: '/url/:id',
    name: "URLDemo",
    component: URLDemo
  }
]

传值方式：

this.$router.push('/user/xxx');

获取传递过来的值：

this.route.params

 

方式四：URL命名路由传值

通过路由跳转传值，适用于需要路由跳转的情况，并且参数不在URL路径上显示

// router -> index.js
const routes = [
  {
    path: '/url',
    name: "URLDemo",
    component: URLDemo
  }
]

传值方式：

this.$router.push({
    name: 'URLDemo',
    params: {
        key: value
    }
});

获取传递过来的值：

this.route.params  // {"key":"value"}

 

方式五：URL query方式

通过路由跳转传值，适用于需要路由跳转的情况，并且参数较多

// router -> index.js
const routes = [
  {
    path: '/url',
    name: "URLDemo",
    component: URLDemo
  }
]

传值方式：

this.$router.push({
    path: 'URLDemo',
    query: {
        key: value
    }
});

获取传递过来的值：

this.route.query  // {"key":"value"}

 

方式六：ref方式

利用this.$refs 获取 子组件 的值或方法

 

<!--父组件 HTML-->
<template>
  <div>
    <Child ref="child"></Child>
  </div>
</template>

获取子组件的值：

this.$refs.child.xxx  // xxx可以是子组件的方法名或变量名

 

方式七：$parent方式

利用this.$parent 获取 父组件 的值或方法

 

this.$parent.xxx  // xxx可以是父组件的方法名或变量名

 

方式八：通知传值（广播传值）

1. 新建一个.js文件，创建一个vue对象并导出

import Vue from 'vue'

let vueEvent = new Vue();

export default vueEvent;

2. 在需要传递值的组件中导入并使用，使用$emit()抛出事件和值

// 组件一
import vueEvents from '../model/vueEvent'

methods: {
    commit() {
        vueEvents.$emit('demoEvent', '我是Demo组件的值')
    }
}

3. 在需要接收值的组件中导入并使用，使用$on()监听事件

// 组件二
import vueEvents from '../model/vueEvent'

created() {
    vueEvents.$on('demoEvent', e => {
        this.value = e  // e == '我是Demo组件的值'
    })
}

 

方式九：localStorage方法

window.localStorage.setItem('key',value);  // 保存值
window.localStorage.getItem('key');  // 获取值