一、概述
$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。