• ref的使用

    一、ref 的基本使用

    ref 本身是作为渲染结果被创建的

    在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此不应该试图用它在模板中做数据绑定。

    ref 的基本使用，用在元素上：

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<div ref="aa" id="aa">
    11. 				我们在学习vue
    12. 			div>
    13. 			<button type="button" @click="getdom">点击button>
    14. 		div>
    15. 		<script>
    16. 			const vm = new Vue({
    17. 				el:'#app',
    18. 				data(){
    19. 					return {
    20. 						
    21. 					}
    22. 				},
    23. 				methods:{
    24. 					getdom(){
    25. 					let a = document.getElementById('aa')
    26. 						console.log(a); 
    27. 						 console.log(this.$refs.aa); 
    28. 					}
    29. 				}
    30. 				
    31. 				
    32. 			})
    33. 		script>
    34. 	body>
    35. html>

    二、ref 在组件的使用

    $refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件

    ref可以调用组件中的方法：
    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<hello-world ref="hello">hello-world>
    11. 			<button @click="getHello">获取helloworld组件中的值button>
    12. 		div>
    13.  
    14. 		<template id="cpn">
    15. 			<div>111div>
    16. 		template>
    17. 		<script>
    18.             //子组件
    19. 			const HelloWorld = {
    20. 				template: '#cpn',
    21. 				data() {
    22. 					return {
    23. 						number: 0
    24. 					}
    25. 				},
    26. 				methods: {
    27. 					handelclick() {
    28. 						console.log('被调用了');
    29. 					}
    30. 				}
    31. 			}
    32.             //父组件
    33. 			const vm = new Vue({
    34. 				el: '#app',
    35. 				data() {
    36. 					return {
    37.  
    38. 					}
    39. 				},
    40. 				components: {
    41. 					HelloWorld
    42. 				},
    43. 				methods: {
    44. 					getHello() {
    45. 						console.log(this.$refs.hello);
    46. 						console.log(this.$refs.hello.number);
    47. 						console.log(this.$refs.hello.$el.innerHTML);
    48. 					}
    49. 				}
    50.  
    51. 			})
    52. 		script>
    53. 	body>
    54. html>

     

    三、ref 的复杂使用

    ref在子组件上的使用：
    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			<counter @changenum="change" ref="num1">counter>
    11. 			<counter @changenum="change" ref="num2">counter>
    12. 			<h3>总价：{{total}}h3>
    13. 		div>
    14. 		<template id="cpn">
    15. 			<div @click="handelclick">{{number}}div>
    16. 		template>
    17. 		<script>
    18. 			const counter = {
    19. 				template:'#cpn',
    20. 				data(){
    21. 					return {
    22. 						number:0
    23. 					}
    24. 				},
    25. 				methods:{
    26. 					handelclick(){
    27. 						this.number++
    28. 						this.$emit('changenum')
    29. 					}
    30. 				}
    31. 			}
    32. 			const vm = new Vue({
    33. 				el:'#app',
    34. 				data(){
    35. 					return {
    36. 						total:0
    37. 					}
    38. 				},
    39. 				components:{
    40. 					counter
    41. 				},
    42. 				computed:{
    43. 					/* total(){
    44. 						console.log(this.$refs.num1);
    45. 						return this.$refs.num1.number +this.$refs.num2.number
    46. 					} */
    47. 				},
    48. 				methods:{
    49. 					change(){
    50. 						console.log(this.$refs);
    51. 						this.total = this.$refs.num1.number +this.$refs.num2.number
    52. 					}
    53. 				}
    54. 				
    55. 			})
    56. 			
    57. 			//总结:ref可以实现组件通讯 同时在computed中是无法获取this.$refs的
    58. 		script>
    59. 	body>
    60. html>

     

  • 相关阅读:
    P1104 生日
    记一次生产环境内存占用过高的排查
    mysql和redis库存扣减和优化
    什么是邮件签名证书？
    接口性能优化
    Mongo聚合分析命令浅析
    学会 arthas，让你 3 年经验掌握 5 年功力！
    如何使用 C++ 构建一个环结构？
    ceph分布式存储部署
    Elasticsearch：在你的数据上训练大型语言模型 (LLM)
  • 原文地址：https://blog.csdn.net/qq_53841687/article/details/126242137