vue 父子组件传值方法总结(六种方法)

1props

子组件:

 props:["name"]

父组件:

2$parent

子组件接收:

this$parentsmsg//这个msg是父组件的msg

3依赖注入

通过父组件提供给后代组件曝露的属性和方法

父组件:

  data(){

return{

name:"父亲的名字"

          }

  },

provide:function(){

return{

getName:thisname

              }

        }

子组件接收:

inject:["getName"]

1emit

自定义事件

    子组件<child>:

this$emit("increment","我是子组件")//increment: 随便自定义的事件名称  第二个参数是传值的数据

    父组件<Father>:

      methods:{

        f1(data){

consolelog(data)//打印"我是子组件"

          }

      }

2ref

子组件 <Child>:

  data(){

return{

name:"我是子组件"

          }

        }

父组件 <Father>:

  methods:{

      this$refschild_idname  //这个name是子组件的name

    }

3终极方法

使用状态管理工具,例如Vuex

父组件调用子组件的方法，可以传递数据。

父组件：

子组件：

子组件调用父组件的方法并传递数据。

子组件：

父组件：

兄弟组件之间相互传递数据。

首先创建一个vue的空白实例（兄弟组件的桥梁）

子组件a:发送放使用$emit自定义事件把数据带过去。

子组件b:接收方通过$on监听自定义事件的callback接收数据

父组件：

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

将on变成once，即只执行一次。

移除自定义事件监听器，语法：vm$off( [event, callback] )

如果没有提供参数，则移除所有的事件监听器；（注意这条，一般在mainjs中，移除所有事件绑定）

如果只提供了事件，则移除该事件所有的监听器；

如果同时提供了事件与回调，则只移除这个回调的监听器。

其效果是，当控制权传递回调用方法时，在方法中对参数所做的任何更改都将反映在该变量中。若要使用ref参数，则方法定义和调用方法都必须显式使用ref关键字。ref是 Reference的缩写。

中文名 ref 外文名 ref 用 途 C#中关键字通过引用传递参数 引用方法 显式使用

例如：

这与 out 不同，out 的参数在传递之前不需要显式初始化。尽管ref和out在运行时的处理方式不同，但它们在编译时的处理方式是相同的。因此，如果一个方法采用ref参数，而另一个方法采用out 参数，则无法重载这两个方法。

注意：属性不是变量，因此不能作为ref参数传递。

ref和out两个参数的不同在于：

1、ref传进去的参数必须在调用前初始化，out不必，即：

2、ref传进去的参数在函数内部可以直接使用，而out不可：

3、ref传进去的参数在函数内部可以不被修改，但out必须在离开函数体前进行赋值。

引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模版中做数据绑定。

子组件索引

尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref

为子组件指定一个索引 ID 。例如：

当 ref和 v-for 一起使用时， ref 是一个数组或对象，包含相应的子组件。

$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs。

第三方组件官网

Element-ui

iView

Vant

如果父类组件需要直接获取子类的方法 可以使用 $children

子获父 $parent 子获取跟组件 $root

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3

我们把vue实例当作根组件（父组件）

父跟子的关系

通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值

我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值

父组件获取子组件的值，我们用 $children 来获取，

$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件

如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：

如下