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，不好使，必须是及时传，受生命周期限制