一般情况下需要获取dom元素中的值需要如下代码处理:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function getUser() {
let data = document.querySelector(".user").value;
alert(data);
}
function getPwd() {
let data = document.getElementById("pwd").value;
alert(data);
}
</script>
</head>
<body>
<input class="user" type="text" name="username">
<input id="pwd" type="text" name="password">
<button onclick="getUser()">获取User</button>
<button onclick="getPwd()">获取Pwd</button>
</body>
</html>
1、基本用法
<template>
<div>
<div ref="basicRef">hello world</div>
<button @click="getDom">点击获取</button>
</div>
</template>
<script>
export default {
methods: {
getDom() {
console.log(this.$refs.basicRef);
},
},
};
</script>
点击输出:<div>hello world</div>
2、父组件获取子组件数据
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {
msg: "child component",
};
},
};
</script>
<template>
<div>
<ChildRefSample ref="childRef" />
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
import ChildRefSample from "./ChildRefSample.vue";
export default {
components: {
ChildRefSample,
},
methods: {
getChildData() {
console.log("getChildData: ", this.$refs.childRef.msg);
},
},
};
</script>
点击输出:getChildData: child component
3、父组件调用子组件方法
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
hello() {
console.log("hello");
},
},
};
</script>
<template>
<div>
<ChildRefSample ref="childRef" />
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
import ChildRefSample from "./ChildRefSample.vue";
export default {
components: {
ChildRefSample,
},
methods: {
getChildData() {
this.$refs.childRef.hello()
},
},
};
</script>
输出:hello
4、子组件调用父组件方法
<template>
<div></div>
</template>
<script>
export default {
methods: {
hello() {
this.$emit("callParent");
},
},
};
</script>
<template>
<div>
<ChildRefSample
ref="childRef"
@callParent="printData"
/>
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
import ChildRefSample from "./ChildRefSample.vue";
export default {
components: {
ChildRefSample,
},
methods: {
getChildData() {
this.$refs.childRef.hello();
},
printData() {
console.log("print parent data");
},
},
};
</script>
输出:print parent data
PS:最新在学前端,以下是学习过程中写的一个小程序,欢迎体验~