【Vue组件通信】props、$ref、$emit，组件传值

1、什么是组件通信

组件间如何通信，也就成为了vue中重点知识，组件通信，涉及到组件之间数据的传递、类似NET POST/GET参数传递。
Vue基本的三种传递方式** (props、\(ref、\)emit)** 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。

2、父子通信 (props、\(ref、\)emit) 区别

prop 着重于数据的传递，它并不能调用子组件里的属性data和方法methods。适合的场景是从父亲给孩子，给了之后就是给了，最适合使用prop,。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递，但是也是可以传递参数的。

3、Props 父到子

3.1 参考代码

3.1.1 父页面

1. 父页面调用子组件 参考（1）
2. 引用子组件 参考（2）
3. 注册局部组件 参考（3）

3.1.2 子页面

1. props 写入需要的属性。props 支出类型【String、Number、Boolean、Array、Object、Date、Function、Symbol】，参考官网文档（组件props 介绍）

3.2 扩展知识

• 单向数据流（从父到子，先父后子）
• 传递静态或动态 Prop（v-bind）
• 驼峰命名法等价短横线分隔命名
• 子组件继承父组件的属性
• 子组件继承父组件的属性，可以设置替换/合并已有的 Attribute（覆盖重写）、禁用 Attribute 继承

详细介绍文档https://cn.vuejs.org/v2/guide/components-props.html

4、ref 父到子

4.1 参考代码

4.1.1 父页面

可以在父页面任意的使用,可以调用子页面的 methods

this.$refs.usernameInput.focus()
this.$refs.usernameInput.demo('我是参数，任意的那种')

4.1.2 子页面

methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  },
  demo(data){
    console.log(data)
  }
}

4.2 扩展知识

• 尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：
• 当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
• $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
• ref 对子组件的方法属性的索引，通过$ref可能获取到在子组件里定义的属性和方法。
• 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过\(ref可能获取到该DOM 的属性集合，访问DOM元素，作用与JQ的 【\)('#ID')】类似。

5、emit 子到父

5.1 参考代码

5.1.1 父页面

methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.input.focus()
},
showMsg(data){

console.log('showMsg')
console.log(data)
//data 输出： 我是组件的参数，接收一下啊

}
}

 
### 4.1.2 子页面

methods: {

demo(data){
console.log('demo')
console.log(data)
this.$emit('getMessage', '我是组件的参数，接收一下啊')

}
}

### 5.2 扩展知识

- emit 是程序化的事件侦听器，它可以被 v-on 侦听 
- 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入**内部组件**——在创建更高层次的组件时非常有用。