首页 > 其他分享> 文章详细

vue: 组件之间传值

2020-09-21 12:31:43 阅读：143 来源： 互联网

标签：vue name age export 组件传值函数

1、父子传参：

父组件的数据、方法传递给子组件，子组件通过props接收，可以是数组、对象。

2、子传父（两种）：

this.$emit('')可以触发一个自定义的事件

秒收目录站https://www.tomove.com.cn

第一种方法:(推荐)

第一步: 在子组件中绑定一个函数

<p><button @click="changeParentName">改变父级的name</button></p>

第二步: 在子组件中定义函数，再函数中自定义一个事件

export default {
    methods: {
        changeParentName: function() {
            this.$emit('changeParentName', 'xiaohong') // 触发一个自定义事件并传参xiaohong
        }
    }
}

第三步: 绑定在父组件中

<app-user-detail  @changeParentName="changeName"></app-user-detail>

第四步: 在父组件中写一个事件函数

export default {
    data() {
        return {
            name: 'zhuli',
            age: 10,
        }
    },
    components: {
        'app-user-detail': UserDetail,
        'app-user-edit': UserEdit,
    },
    methods: {
        changeName: function(name) {  // name形参是子组件中传入的值
        this.name = name
        },
    }
}

第二种方法:

第一步: 先在父组件中写一个callback函数

export default {
    data() {
        return {
            name: 'zhuli',
            age: 10,
        }
    },
    components: {
        'app-user-detail': UserDetail,
        'app-user-edit': UserEdit,
    },
    methods: {
        callback: function(name) {
            this.name = name
        }
    }
}

第二步: 把callback函数传过去

<app-user-detail :callback="callback"></app-user-detail>

第三步: 在子组件中接收callback函数

props: {
    callback: Function,
},

第四步: 点击父级button按钮的时候，执行callback函数

<p><button @click="callback('小红')">改变父级的name</button></p>

成功。推荐使用第一种

3、兄弟组件传参

第一种方法:

第一步: 在父组件中给要传值的兄弟两个都绑定要传的变量。

<app-user-detail :age="age"></app-user-detail>
<app-user-edit :age="age" @editAge="changeAge"></app-user-edit>

第二步: 在要传值得组件中接受变量和绑定触发事件

<template>
    <div>
        <h3>用户编辑页面</h3>
        <p>编辑用户</p>
        <p>年龄: {{ age }}</p>
        <p><button @click="changeAge">编辑年龄</button></p>
    </div>
</template>
<script>
export default {
    props: ["age"],
    methods: {
        changeAge: function() {
        this.$emit('editAge', 20)   // 触发自定义事件并传值
        }
    }
}
</script>

第三步: 在父组件中绑定要传组件中的自定义事件

export default {
    data() {
        return {
            name: 'zhuli',
            age: 10,
        }
    },
    components: {
        'app-user-detail': UserDetail,
        'app-user-edit': UserEdit,
    },
    methods: {
        changeAge: function(age) {
            this.age = age
        },
    }
}

总结: 当要传值的组件改变了父组件的变量，父组件又可以把改变的值传值所绑定变量的组件，实现兄弟间传值。

第二种方式: 思想: 既然要借助父级，那么可不可不定义一个全局事件

第一步: 在入口文件main.js里暴露一个vue实例

export const EventBus = new vue() // 暴露一个vue实例

第二步: 在要传值的文件里导入vue实例模块，age使用自己的变量，再定义一个全局触发事件函数，触发事件函数绑定在一个button上

<template>
    <div>
        <h3>用户编辑页面</h3>
        <p>编辑用户</p>
        <p>年龄: {{ age }}</p>
        <p><button @click="changeAge">编辑年龄</button></p>
    </div>
</template>
<script>
import { EventBus } from "../main.js"
// 导入模块
export default {
 // props: ["age"],
 data() {
     return {
         age: 10,
     }
    },
  methods: {
      changeAge: function() {
          this.age = 20
          EventBus.$emit("editAge", this.age)
          // 触发全局事件 并且把改变后的值传入事件函数
          // console.log(EventBus)
      }
    }
}
</script>

第三步: 在要被传入值得组件中也导入vue实例模块，也不使用父组件中传过来个age,自己重新定义，创建一个初始化的钩子函数，再使用created钩子函数中使用传值组件的全局定义事件。

import { EventBus } from "../main.js"
export default {
    data() {
        return {
            name : this.myName,
            age: 10
        }
    },
    methods: {
        changeParentName: function() {
            this.$emit('changeParentName', 'xiaohong')
            // this.$emit('')触发自定义事件
        },
     created() {
         EventBus.$on('editAge', (age) => { // 使用$on去绑定事件
             this.age = age // 使用es6写法,this刚好指向父级
         })
     }
}

总结: 现在兄弟之间传值，都没有通过父组件

标签：vue,name,age,export,组件,传值,函数
来源： https://www.cnblogs.com/qianxiaox/p/13704876.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue: 组件之间传值

第一种方法:(推荐)

第二种方法: