// 1.给想要获取的元素或者组件设置ref属性(ref="msg")
// 2.通过this.$refs.msg获取该元素或者该组件
一、获取页面DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取页面dom元素</title>
</head>
<body>
<div id="app">
<!-- 想要获取的元素设置ref属性 -->
<h2 ref="msg">{{ message }}</h2>
<button @click="btnClick">btnClick</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "hello vuejs"
}
},
methods: {
btnClick() {
// 通过[this.$refs.属性值]获取元素
console.log(this.$refs.msg.innerHTML);
}
}
})
</script>
</body>
</html>
二、获取子组件内部data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取子组件data</title>
</head>
<body>
<div id="app">
<!-- 给组件设置ref属性 -->
<cpn ref="pinfo"></cpn>
<button @click="btnClick">btnClick</button>
</div>
<template id="cpn">
<div>
<h2>{{ info.name }} + {{ info.age }} + {{ info.height }}</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "hello vuejs"
}
},
components: {
cpn: {
template: "#cpn",
data() {
return {
info: {
name: "yg",
age: 25,
height: 1.93
}
}
}
}
},
methods: {
btnClick() {
console.log(this.$refs.pinfo.info.name);
}
}
})
</script>
</body>
</html>
三、获取子组件内部方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取子组件内部方法</title>
</head>
<body>
<div id="app">
<!-- 给组件设置ref属性 -->
<cpn ref="pcount"></cpn>
<button @click="btnClick">获取子组件方法</button>
</div>
<template id="cpn">
<div>
<p>{{ count }}</p>
<button @click="countClick">countClick</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "hello vuejs"
}
},
components: {
cpn: {
template: "#cpn",
data() {
return {
count: 0
}
},
methods: {
countClick() {
this.count ++;
console.log("调用成功")
}
}
}
},
methods: {
btnClick() {
console.log(this.$refs.pcount.countClick());
}
}
})
</script>
</body>
</html>
四、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p2</title>
</head>
<body>
<div id="app">
<!-- 1.获取data数据 -->
<p ref="dt1">获取data数据</p>
<button @click="datapClick">btn</button>
<hr>
<!-- 2.获取子组件data数据 -->
<cpn ref="cpn1"></cpn>
<p ref="dt2">获取子组件data数据</p>
<button @click="datacClick">btn</button>
<hr>
<!-- 3.获取子组件方法 -->
<cpn ref="cpn2"></cpn>
<p ref="dt3">获取子组件方法</p>
<button @click="methClick">btn</button>
</div>
<template id="cpn">
<div>
<p>{{ info }}</p>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message: "hello vuejs"
}
},
components: {
cpn: {
template: "#cpn",
data() {
return {
info: "hello jQuery"
}
},
methods: {
cpnClick() {
alert("hello world");
}
}
}
},
methods: {
// 获取data数据
datapClick() {
this.$refs.dt1.innerHTML = this.message;
},
// 获取子组件data数据
datacClick() {
this.$refs.dt2.innerHTML = this.$refs.cpn1.info;
},
// 获取子组件methods
methClick() {
this.$refs.dt3.innerHTML = this.$refs.cpn2.cpnClick();
}
}
})
</script>
</body>
</html>
