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

1、什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递、类似NET POST/GET参数传递。 Vue基本的三种传递方式** (props、(ref、)emit)** 组件是 vue...

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" 传入**内部组件**——在创建更高层次的组件时非常有用。
  • 发表于 2020-07-25 10:40
  • 阅读 ( 141 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除