首页vue2的ref和$ref

vue2的ref和$ref

时间: 2023-11-18 21:50:57 浏览: 224

vue之父子组件间通信实例讲解(props、$ref、$emit)

Vue 之父子组件间通信实例讲解（props、$ref、$emit）在 Vue 中，组件间的通信是非常重要的知识点之一。本文将通过 props、$ref 和 $emit 三个知识点，来讲解如何实现父子组件间的通信。让我们来建立两个组件，father.vue 和 child.vue，作为示例的基础。 // 父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: { Child }, } </script> // 子组件 <template> <h3>我是子组件！</h3> </template> <script> </script> 这两部分的代码都很清晰明了，父组件通过 import 的方式导入子组件，并在 components 属性中注册，然后子组件就可以用标签 <child> 的形式嵌进父组件中。一、通过 props 实现通信 props 是 Vue 中最基本的组件间通信方式。 props 是单向绑定的，即只能父组件向子组件传递，不能反向。有两种方式可以传递 props：静态传递和动态传递。（1）静态传递静态传递子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据。  <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child> </div> </template> <script> import Child from '../components/child.vue' export default { components: { Child }, } </script>  <template> <h3>{{ message }}</h3> </template> <script> export default { props: ['message'] // 声明一个自定义的属性 } </script> （2）动态传递动态传递我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过 v-bind 绑定 props 的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。  <template> <div> <h1>我是父组件！</h1> <child message="我是子组件一！"></child>  <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> 二、通过 $ref 实现通信 $ref 是 Vue 中用于注册组件实例的引用信息的。通过 $ref 可以获取到子组件里的属性和方法。（1）如果 $ref 用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过 $ref 可以获取到在子组件里定义的属性和方法。（2）如果 $ref 在普通的 HTML 元素上，可以理解为对元素的索引，可以通过 $ref 获取到元素的 DOM 节点。三、通过 $emit 实现通信 $emit 是 Vue 中用于触发事件的方法。父组件可以通过 $emit 触发事件，然后子组件可以通过 $on 监听事件从而实现通信。 props、$ref 和 $emit 是 Vue 中实现父子组件间通信的三种方式，各有其特点和应用场景。通过这三种方式，可以灵活地实现父子组件间的通信，从而增强应用程序的灵活性和可维护性。

ref是Vue.js中用于给元素或组件添加引用的属性。在vue2中，使用ref属性可以通过this.$refs来访问被引用的元素或组件。根据使用场景的不同，this.$refs得到的对象类型也不同。当ref在简单引用时，this.$refs返回的是VueComponent对象；当ref在v-for指令下使用时，this.$refs返回的是数组对象，且数组长度与v-for中的循环次数相同；当ref在v-show指令下使用时，返回的是多个数组数据；当ref在v-if指令下使用时，返回的是当前显示对象的数组，一直只有一个。需要注意的是，$refs只有在组件渲染完成后才被填充，初始渲染时不能访问它们，并且$refs是非响应式的，因此不能用它在模板中进行数据绑定。此外，在微信小程序中给DOM元素使用ref是无效的，得到的结果是空对象。

阅读全文