Vue中使用ref获取DOM元素以及组件的引用

请陛下批阅


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref的使用title>
    <script src="../../vue/vue-v2.6.11.js">script>
head>
<body>
<div id="app">
    <input type="button" value="点击" @click="getText">
    <h3 ref="h3">h3中的文本内容:最近压力有点大~~~~~~~h3>
    <hr/>
    <login ref="login">login>
div>

<template id="login">
    <h3>登录啊啊啊啊啊啊!!!!!h3>
template>
body>
<script>
    var login = {
      
        template: '#login',
        data() {
      
            return {
      
                msg: '这是组件的数据'
            }
        },
        methods: {
      
            show() {
      
                console.log('调用组件的show方法');
            }
        }
    };
    var vm = new Vue({
      
        el: '#app',
        methods: {
      
            getText() {
      
                // 获取被ref标记的标签的文本内容
                console.log(this.$refs.h3.innerHTML)

                // 获取被ref标记的组件中的data中的数据
                console.log(this.$refs.login.msg);

                // 调用被ref标记的组件中的方法
                this.$refs.login.show();
            }
        },
        components: {
      
            login
        }
    });
script>
html>

你可能感兴趣的:(Vue中使用ref获取DOM元素以及组件的引用)