Vue组件之间传值的几种方法 (直接上代码)

vue组件之间传值的几种方法总结

一. props（父传子）

父组件传递

<template><div><HelloWorld :msg="msg" /></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";export default {name: "App",data() {return {msg: "需要传递给儿子的数据",};},components: {HelloWorld,},
};
</script>

子组件接收

<template><div ><h1>{{ msg }}</h1> </div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script>

二. $emit（子传父）

子组件传递

<template><div>子组件<input type="text" v-model="changeVal" /></div>
</template><script>
export default {name: "HelloWorld",data() {return {changeVal: "",};},watch: {changeVal() {this.$emit("childInput", this.changeVal);},},
};
</script>

父组件接收

<template><div>父组件{{msg}}<HelloWorld @childInput="getVal" /></div>
</template><script>
import HelloWorld from "./components/HelloWorld.vue";export default {name: "App",data() {return {msg: "123456",};},methods: {getVal(msg) {this.msg = msg;},},components: {HelloWorld,},
};
</script>

三. $emit $on（非父子）

1.src文件夹新建common文件夹

2.common文件夹下新建bus.js文件

bus.js 写这个

import Vue from 'vue';
export default new Vue;

兄弟1 传递

<template><div>第一个 给兄弟的数据是:{{ msg }}<button @click="send">点击传递给兄弟数据</button></div>
</template><script>
import bus from "@/common/bus";
export default {name: "HelloWorld",data() {return {msg: "6666666666",};},methods: {send() {bus.$emit("send", this.msg);},},
};
</script>

兄弟2 接收

<template><div>第二个 {{ msg }}</div>
</template><script>
import bus from "@/common/bus";
export default {name: "HelloWorld",data() {return {msg: "",};},mounted() {bus.$on("send", (data) => {this.msg = data;});},
};
</script>

Vue组件之间传值的几种方法 (直接上代码)相关推荐

vue组件之间传值的几种方式
vue组件传值父子组件之间传值.几种常见方式第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
vue组件间传值的几种方法
一丶父子组件传值先在父组件中给子组件的自定义属性绑定一个父组件的变量 <template class="father"><child :自定义属性名=&quo ...
vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
vue组件之间传值几种方法
方法一.父子组件传值通过props向下传递父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...

Vue组件之间传值的几种方法 (直接上代码)

vue组件之间传值的几种方法总结

Vue组件之间传值的几种方法 (直接上代码)相关推荐

最新文章

热门文章