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

Posted 2020-12-18 sopcce

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）

<template>
    <div>
    <h1>我是父组件！</h1>
    <one-chart id="myChart"  :height="500px" :width="500px" :chart-option="echartOption" />   
    <!-- （1）这是子组件--->
    </div>
</template>
 
<script>
// （2）引用一下子组件 位置
import OneChart from ‘@/components/Charts/OneChart‘
export default {
 components: { OneChart }, // （3）注册一下组件
}
</script>

3.1.2 子页面

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

<template>
 <h3>我是子组件！</h3>
</template>
<script>
import echarts from ‘echarts‘
import resize from ‘./mixins/resize‘

export default {
  name: ‘OneChart‘,
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: ‘chart‘
    },
    id: {
      type: String,
      default: ‘chart‘
    },
    width: {
      type: String,
      default: ‘200px‘
    },
    height: {
      type: String,
      default: ‘200px‘
    },
    chartOption: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      chart: null 
    }
  },
  watch: {
    chartOption: function() {
      console.log(‘我是组件chart watch‘)
      console.log(this.chartOption)

      if (this.chartOption !== undefined && this.chartOption !== null) {
        this.initChart()
      }
    } 
  },
  mounted() {
    console.log(‘我是组件chart mounted‘)
    console.log(this.chartOption) 
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      console.log(this) 
    }
  }
}
</script>

3.2 扩展知识

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

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

4、ref 父到子

4.1 参考代码

4.1.1 父页面

<base-input ref="usernameInput"></base-input>

可以在父页面任意的使用,可以调用子页面的 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 父页面

<base-input ref="usernameInput" @inputShowMsg="showMsg" ></base-input>

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" 传入**内部组件**——在创建更高层次的组件时非常有用。