<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展2---$refs的使用</title>
</head>
<body>
<div id="app">
<com-a ref="comA">组件</com-a>
<div ref="ref_dom">普通dom</div>
<a href="javascript:;" @click.prevent="testRefs">点击</a>
</div>
<script>
// $refs是通过模板的dom或组件定义一个ref的属性，使用方式vm.refs.定义的ref字符串
// 1、如果ref定义在组件上，那么refs获取的是组件的vm对象，并且可获取组件data属性和调用方法。
// 2、如果ref定义在dom上，那么refs获取的是dom元素。
Vue.component('comA',{
template:"<a/>",
methods: {
alertMsg() {
window.alert('msg');
}
},
data() {
return {
title:'js'
}
}
});
var vm = new Vue({
el:'#app',
methods:{
testRefs() {
var ref = this.$refs.comA;
console.log(ref);
console.log(ref.title);
ref.alertMsg();
}
},
mounted() {
var dom = this.$refs.ref_dom;
console.log(dom);
}
});
</script>
vue基础扩展2---$refs的使用
猜你喜欢
转载自blog.csdn.net/shuixiou1/article/details/112689615
今日推荐
周排行