vue组件之间值的传递

1.父子组件之间的传值 1）父向子传递： 父组件通过v-bind绑定一个变量，子组件通过prop接收这个变量

父组件

<template> <div> <m-child :message="'Parent message'" ></m-child> </div> </template> <script> // 引入子组件 import MChild from '@/components/Child' export default { data () { return { message: '' } }, components: { MChild, },

子组件

<template> <div> <h1>{{message}}</h1> </div> </template> <script> export default { // 要接受父组件传递的参数 props: { message: { type: String, default: '' }, },

2）子向父传递： 子组件在函数内发起$emit，传递函数名以及参数，父组件在子组件的身上设置v-on传递过来的函数名，并调用自己的函数

子组件

<template> <div> <button @click="takeMsg"></button> </div> </template> export default { methods: { takeMsg() { this.$emit("takeMsg", "这是子组件传递的值"); } }, }

父组件

<template> <div> <h1>{{message}}</h1> <m-child @takeMsg='takeMsg'></m-child> </div> </template> import MChild from '@/components/Child' export default { components: { MChild, }, data(){ return { message: '' } }, methods: { takeMsg(value) { this.message=value; } }, }

2.非父子组件之间的传递 1）Vuex 2）建立一个公共的js文件，专门用来传递消息

message.js

import Vue from 'vue' export default new Vue

在需要传递消息的地⽅引⼊这个文件，并通过message .$emit传递

import message from './util/message' methods: { passMsg () { message.$emit('message', 'i am a message') } },

在需要接收消息的地方使用message .$on接收消息

mounted () { message.$on('message', (value) => { this.childMessage = value });