在在Vue中使用中使用ref获取获取dom元素节点及组件内的数据和方法元素节点及组件内的数据和方法
一、获取一、获取dom元素节点元素节点
为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名
ref即为reference(引用)的前三个字母
This is title
This is content
用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值
var vm=new Vue({
el:'#app',
data:{},
methods:{
getElement()
{
console.log(this.$refs.mytitle.innerText);
console.log(this.$refs.mycontent.innerText);
}
}
});
二、获取组件内的数据和方法二、获取组件内的数据和方法
var login={
template:"
Login
",
data()
{
return {
msg:"this is msg!"
}
},
methods:{
sayHello()
{
console.log("Hello")
}
}
}
同样 为组件添加一个ref属性
还是用$refs属性进行获取：
var vm=new Vue({
el:'#app',
data:{},
methods:{
getElement()
{
// 获取组件中的数据
console.log(this.$refs.mylogin.msg);
// 调用组件中的方法
this.$refs.mylogin.sayHello();
}
},
components:{
login
}
});
资源评论
