• Vue中$ref、$emit、props三中传参方式区别和使用


    一、概述

    $ref、$emit、props是Vue中常见的传参方式,可以实现组件与组件之间的数据传递和交互

    二、$ref的使用方式

    父组件:

    <!-- 父组件 -->
     
     
     
    <template>
     
     <div>
     
     <h1>我是父组件!</h1>
     
     <child ref="msg"></child>
     
     </div>
     
    </template>
     
     
     
    <script>
     
     import Child from '../components/child.vue'
     
     export default {
     
     components: {Child},
     
     mounted: function () {
     
      console.log( this.$refs.msg);
     
      this.$refs.msg.getMessage('我是子组件一!')
     
     }
     
     }
     
    </script>

    子组件:

    <!-- 子组件 -->
     
     
     
    <template>
     
     <h3>{{message}}</h3>
     
    </template>
     
    <script>
     
     export default {
     
     data(){
     
      return{
     
      message:''
     
      }
     
     },
     
     methods:{
     
      getMessage(m){
     
      this.message=m;
     
      }
     
     }
     
     }
     
    </script>

    通过ref=‘msg'可以将子组件child的实例指给$ref,并且通过.msg.getMessage()调用到子组件的getMessage方法,将参数传递给子组件。

    三、$emit的使用方式

    $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

    父组件:

    <!-- 父组件 -->
    <template>
      <div>
        <h1>我是父组件!</h1>
        <child message="我是子组件一!"></child>
        <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
        <child v-bind:message="a+b"></child>
        <!-- 用一个变量进行动态赋值。-->
        <child v-bind:message="msg"></child>
        <other-child @getMessage="showMsg"></other-child>
        <h1>{{content}}</h1>
      </div>
    </template>
     
    <script>
     
    import Child from '../components/child.vue'
    import OtherChild from '../components/otherChild.vue'
     
    export default {
     
      components: { Child, OtherChild },
     
      data () {
        return {
          a: '我是子组件二!',
          b: 112233,
          msg: '我是子组件三!' + Math.random(),
          content: ''
        }
      },
     
      methods: {
        showMsg (title) {
          this.content = title
        }
      }
     
    }
     
    </script>

    子组件:

    <template>
      <h3>我是子组件!</h3>
    </template>
    <script>
    export default {
      mounted: function () {
        this.$emit('getMessage', '我是子组件传给父组件的参数!')
      }
    }
    </script>

    四、props的使用方式

    子组件的props选项能够接收来自父组件数据

    父组件:(这里采用的是动态传递)

    <!-- 父组件 -->
     
     
     
    <template>
     
     <div>
     
     <h1>我是父组件!</h1>
     
     <child message="我是子组件一!"></child>
     
     
     
     <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
     
     <child v-bind:message="a+b"></child>
     
     
     
     <!-- 用一个变量进行动态赋值。-->
     
     <child v-bind:message="msg"></child>
     
     </div>
     
    </template>
     
     
     
    <script>
     
    import Child from '../components/child.vue'
     
    export default {
     
     components: {Child},
     
     data() {
     
     return {
     
      a:'我是子组件二!',
     
      b:112233,
     
      msg: '我是子组件三!'+ Math.random()
     
     }
     
     }
     
    }
     
    </script>

    子组件:

    <!-- 子组件 -->
     
     
     
    <template>
     
     <h3>{{message}}</h3>
     
    </template>
     
    <script>
     
     export default {
     
     props: ['message']
     
     }
     
    </script>

    五、三者的使用场景和区别

    1.$ref

    $ref用于数据之间的传递,如果ref用在子组件上能通过$ref获取到子组件节点、事件、数据、属性,主要还是父组件向子组件通信

    $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

    2.$emit

    $emit用于事件之间的传递, 可以实现子组件传参给父组件

    $emit主要是可以在子组件中触发父组件里面的方法

    3.props

    props用于父组件向子组件传递数据信息,传参方式是单向传输,只能父组件传给子组件,不能实现子组件传参给父组件.

    props 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。

    参考

    参考作者:https://blog.csdn.net/u011441473/article/details/103939511?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

    世界上没有什么偶然,有的只有必然。——壹原侑子
  • 相关阅读:
    编写一个静态类MyExtensions(看不太懂以后应该学到吧)
    c#
    HTML-表格与表单
    VS学习笔记3 (0413)
    HTML 个人简历模板简易版
    C#语言之二维数组
    C#学习笔记---函数 的理解及总结(入门级)
    c#语言-Split拆分
    c#学习之数组 36选7随机数不重复/折半取余
    VS学习笔记--数组
  • 原文地址:https://www.cnblogs.com/liazhimao/p/14817324.html
Copyright © 2020-2023  润新知