可以获取DOM元素，和组件中的数据，方法
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="./lib/jquery2.1.4.min.js"></script>
10 <script src="./lib/Vue2.5.17.js"></script>
11 <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
12 </head>
13
14 <body>
15
16 <div id="app">
17 <input type="button" value="获取元素" @click="getElement">
18 <h3 id="myh3" ref="myh3">哈哈哈哈，今天天气真不错！</h3>
19 <hr>
20 <login ref="mylogin"></login>
21 </div>
22
23 <!-- 模板 -->
24 <template id="tmpl">
25
26 </template>
27
28 <script>
29 var login = {
30 template : ‘<h1>这f 是登录组件</h1>‘,
31 data(){
32 return {
33 msg : ‘newcontent‘
34 }
35 },
36 methods: {
37 show(){
38 console.log(‘嘿嘿黑恶‘);
39 }
40 },
41 }
42
43 var vm = new Vue({
44 el : ‘#app‘,
45 data : {},
46 methods: {
47 getElement(){
48 // ref 是英文单词 【reference】 在浏览器控制台 输入vm 查看
49 console.log(this.$refs.myh3.innerText);
50 console.log(this.$refs.mylogin.msg);
51 this.$refs.mylogin.show()
52 }
53 },
54 components : {
55 login
56 }
57 })
58 </script>
59 </body>
60
61 </html>
原文地址：https://www.cnblogs.com/winter-shadow/p/10206629.html
时间： 2024-08-04 22:16:34