使用ref获取DOM元素 [可以用于父组件向子组件传值]
ref的两种用法1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。案例1：ref 加在普通的元素上<html><head><script src="~/Scripts/vue.js"
·
ref 的两种用法
1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
案例1：ref 加在普通的元素上
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
<div ref="mydiv1">今天天气不错，挺风和日丽的</div>
<div ref="mydiv2">我们下午没有课</div>
<input type="button" value="获取div的文本内容" v-on:click="getDivText" />
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
getDivText: function () {
//在Vue中我们可以通过this.$refs获取到所有添加了ref属性的元素（Vue不建议我们直接操作DOM，所以给了我们ref使用）
//既然拿到了所有添加了ref属性的元素，我们就可以根据ref的值来获取到指定的元素了
//这里是获取ref值为mydiv1的元素，然后拿到这个元素的innerText值。【this.$refs.mydiv1就是获取这个ref值为mydiv1的元素】
var textVal = this.$refs.mydiv1.innerText;
alert(textVal)
//这里是获取ref值为mydiv2的元素，然后拿到这个元素的innerText值
var textVal2 = this.$refs.mydiv2.innerText;
alert(textVal2)
}
}
});
</script>
</body>
</html>如何查看Vue对象
案例2：ref 加在子组件上
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
<mycom ref="mycomTemp"></mycom>
<input type="button" value="调用mycom组件中的getDivText方法" v-on:click="getDivText" /> <!--在父组件中调用子组件中的方法-->
</div>
<template id="temp" >
<div>
<div ref="mydiv1">今天天气不错，挺风和日丽的</div>
<div ref="mydiv2">我们下午没有课</div>
<input type="button" value="获取div的文本内容" v-on:click="getDivText" /><!--子组件自己调用自己的方法-->
</div>
</template>
<script>
var vm = new Vue({
el: "#app",
methods: {
getDivText: function () {
//在Vue中我们可以通过this.$refs获取到所有添加了ref属性的组件（Vue不建议我们直接操作DOM，所以给了我们ref使用）
//既然拿到了所有添加了ref属性的组件，我们就可以根据ref的值来获取到指定的组件了
//以下代码的意思如下：
//先拿到Vue下所有添加了ref属性的组件（即：this.$refs）
//然后获取ref值为mycomTemp的这个组件（即：this.$refs.mycomTemp）。
//再调用这个组件中的getDivText()方法（即：this.$refs.mycomTemp.getDivText()）
var t = this.$refs.mycomTemp.getDivText(); //这个this是指Vue对象，this.$refs是指拿到Vue对象下的所有添加了ref属性的元素或组件
}
},
components: {
"mycom": {
template: "#temp",
methods: {
getDivText: function () {
var a = this.$refs.mydiv1.innerText; //这个this指的是mycom组件，this.$refs指的是拿到mycom组件中的所有添加了ref属性的元素，this.$refs.mydiv1指的是拿到mycom组件中ref值为mydiv1的元素
alert(a);
}
}
}
}
});
</script>
</body>
</html>
利用ref 实现父组件向子组件传值
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--在Vue中ref这个属性是用来给元素或子组件注册引用信息的。-->
<mycom ref="mycomTemp"></mycom>
<input type="button" value="调用mycom组件中的getDivText方法" v-on:click="getDivText" /> <!--在父组件中调用子组件中的方法-->
</div>
<template id="temp">
<div>
<div ref="mydiv1">今天天气不错，挺风和日丽的</div>
</div>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "我叫凡凡"
},
methods: {
getDivText: function () {
//在Vue中我们可以通过this.$refs获取到所有添加了ref属性的组件（Vue不建议我们直接操作DOM，所以给了我们ref使用）
//既然拿到了所有添加了ref属性的组件，我们就可以根据ref的值来获取到指定的组件了
//以下代码的意思如下：
//先拿到所有添加了ref属性的组件（即：this.$refs）
//然后获取ref值为mycomTemp的这个组件（即：this.$refs.mycomTemp）。
//再调用这个组件中的getDivText()方法（即：this.$refs.mycomTemp.getDivText()）
var t = this.$refs.mycomTemp.getDivText(this.msg); //将data中的msg数据传递到 mycom组件中
}
},
components: {
"mycom": {
template: "#temp",
methods: {
getDivText: function (m) { //这里可以接受到调用者传递过来的参数
alert(m);
this.$refs.mydiv1.innerText = m; //拿到这个值我们可以做我们自己想做的事啦，比如重新给div赋值
}
}
}
}
});
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)