父传子如何传递
1.父组件parent代码如下:
<template>
<div class="parent">
<h2>{
{ msg }}</h2>
<son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
</div>
</template>
<script>
import son from './Son' //引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
}
},
components:{
son},
}
</script>
2.子组件son代码如下:
<template>
<div class="son">
<p>{
{
sonMsg }}</p>
<p>子组件接收到内容:{
{
psMsg }}</p>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
}
},
props:['psMsg'],//接手psMsg值
}
</script>
子传父如何传递
通过绑定事件然后及$emit传值
1.父组件parent代码如下
<template>
<div class="parent">
<h2>{
{
msg }}</h2>
<p>父组件接手到的内容:{
{
username }}</p>
<son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son> <!--绑定自定义事件transfer-->
</div>
</template>
<script>
import son from './Son'
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
username:'',
}
},
components:{
son},
methods:{
getUser(msg){
this.username= msg
}
}
}
</script>
2.子组件son代码如下:
<template>
<div class="son">
<p>{
{
sonMsg }}</p>
<p>子组件接收到内容:{
{
psMsg }}</p>
<!--<input type="text" v-model="user" @change="setUser">-->
<button @click="setUser">传值</button>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
user:'子传父的内容'
}
},
props:['psMsg'],
methods:{
setUser:function(){
this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
}
}
}
</script>
Vue兄弟组件传参
介绍:
eventBus又称为”事件总线",它是一种沟通的桥梁。桥梁的两端通过事件总线可以进行交互,传播数据。
1.在src文件中创建Bus.js文件,然后抛出一个空的Vue实列
操作如下:
import Vue from 'Vue'
export default new Vue()
2.然后,在传输的一方,导入Bus.js文件,在当前组件的方法中用Bus.$emit(“方法名”,要传送的值)进行传参;
兄弟组件一操作如下 :
<template>
<div>one组件
<input v-model="oneMsg" />
<button @click="transmit"></button>
</div>
</template>
<script>
import Bus from "@/common/bus" //导入Bus.js
export default {
data() {
return {
oneMsg: '我是兄弟组件一'
}
},
methods() {
// 1.$emit发送消息oneMsg
transmit(){
Bus.$emit("msg", this.oneMsg);
}
}
</script>
3 . 再然后,在接收的一方,导入Bus.js文件,在当前组件的方法中用Bus.$on(“方法名”,(data)=>{//回调返回的参数信息})
兄弟组件二操作如下:
<template>
<div>{
{
twoMsg}}</div>
</template>
<script>
import Bus from "@/common/bus"
export default {
data() {
return {
twoMsg: ''