vue组件传值 | 子父组件

一、子父组件

1、子组件获得父组件中的值:通过v-bind方式绑定在子组件中

// 子组件中定义props
props: ['msg']
// 父组件中:
<deleteBar :msg='this.xx' :name='this.yy'></deleteBar>
//在以html元素方式插入子组件的位置,用:msg的方式绑定已经在子组件中定义的参数,='this.xx'引用父组件中的值

2、子组件中调用父组件中的方法

1> 绑定在子组件定义的元素位置,在子组件中用emit方法触发,与传递值的方法相似

// 子组件:
// 用this.$emit()来触发父组件中的方法,其中第一个值为被绑定的函数,之后为传入的参数
methods: {
    closeForm: function () {
      this.$emit('closeDeletebar', false)
....... } }
// 父组件:
// 用@绑定一个将要在子组件中使用的函数
// =''引号中的函数为父组件的methods中的函数
<deleteBar @closeDeletebar='showDeleteBar' ></deleteBar>
    

2> 用this.$parent.xx()来直接触发。简易方法。xx为父组件中定义的方法。

二、在vuex中定义整个工程中都需要用到的数据

三、eventbus,不好使,必须是及时传,受生命周期限制

原文地址:https://www.cnblogs.com/guoguocode/p/13632845.html