美文网首页
Vue 组件间传值中ref和prop区别

Vue 组件间传值中ref和prop区别

作者: Gino_Li | 来源:发表于2019-07-09 10:58 被阅读0次

区别

  • prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
  • $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。
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方法,将参数传递给子组件。

相关文章

  • Vue 组件间传值中ref和prop区别

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

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 组件基础

    组件的入门 组件的私有化 组件的切换 组件间的传值-向组件内传值 组件间传值-向组件外传值 ref获取元素

  • Vue如何规避父子组件单向数据流

    Vue组件间传值,默认遵循单向下行绑定原则 prop传值的本质,是传递的引用。内外组件同一参数指向同一个内存区域,...

  • Vue 3.0 Provide和Inject实现共享数据

    Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言,Prov...

  • Vue和React组件通信的总结

    在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎...

  • Vue组件传值及页面缓存问题

    一、父子组件传值 基本概念在Vue中,父子组件间的数据流向可以总结为prop向下传递,事件向上传递,即父组件通过p...

  • vue prop

    问题描述在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件...

网友评论

      本文标题:Vue 组件间传值中ref和prop区别

      本文链接:https://www.haomeiwen.com/subject/sfcitctx.html