- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <script src="./lib/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <!-- 子组件 -->
- <com1 ref="zizujian"></com1>
父组件
- <h2 id="mes" ref="message">
- 父组件的内容
- </h2>
- <input type="button" value="获取页面中的信息" @click="getdominfo" ref="anniu">
- </div>
- <template id="cont1">
- <div>
子组件
- </div>
- </template>
- <script>
- var vm = new vue({
- el: "#app",
- data: {},
- methods: {
- // 以前想要获取页面中的 dom 元素, 我们可以使用 document.getElementById('mes').innerText 获取 dom 内容
- // getdominfo() {
- // console.log(document.getElementById('mes').innerText)
- // }
- // 但是 vue 不建议直接操作 dom 元素, 所以可以使用 ref 进行操作, ref 是 vm 实例的属性, 在控制台, 我们输入 vm 就可以看到 vm 身上的相关属性
当我们在页面中添加 ref 属性后, 在控制台输出如下图:
- // 我们将页面元素中添加 ref 属性, 即可在控制台看到
- // 页面中要写 ref 不能添加 s, 因为我们是对单个 h2 进行操作的
- getdominfo() {
- // 输出时, 我们要使用 this.$refs , 这里的要添加 refs, 因为我们的页面中可能有多个 ref
- console.log(this.$refs.message.innerText)
- // 获取子组件的 dom
- console.log(this.$refs.zizujian.mess) // 获取子组件的 data 数据
- this.$refs.zizujian.show() // 获取子组件的方法
- }
- },
- components: {
- com1: {
- template: "#cont1",
- data() {
- return {
- mess: "子组件中的数据"
- }
- },
- methods: {
- show() {
- console.log("子组件的方法")
- }
- },
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3377511.html