<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- <App></App> -->
</div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript">
var subComponent= {
template:`
<div></div>
`
};
Vue.component('subCom',subComponent);
var App = {
data:function() {
return {
}
},
template:`
<div class='app'>
<button ref = 'btn2'>我是另外一个按钮</button>
<button ref = 'btn'>我是按钮1</button>
<button ref = 'btn'>我是按钮2</button>
<subCom ref = 'subc'></subCom>
</div>
`,
created:function() {
console.log(this.$refs.btn);
},
beforeMount:function () {
console.log(this.$refs.btn);
},
mounted:function() {
// 如果是给标签绑定ref属性，使用this.$refs.xxx 获取的是原生js的DOM对象
// ref 属性值 不能重名
// 如果是给组件绑定的ref属性 那么this.$refs.xxx获取的是组件对象
console.log(this.$refs.btn);
console.log(this.$refs.btn2);
console.log(this.$refs.subc);
}
}
new Vue({
el:'#app',
data:function() {
return {
}
},
template:`<App />`,
components:{
App
}
});
</script>
</body>
</html>
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
