<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"src="../vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
Vue.component('subBtns',{
template:`
<button>全局按钮</button>
`
});
var App = {
template: `
<div>
<button ref="btn">按钮</button>
<subBtns ref="subBtnRef"/>
</div>
`,
create(){
console.log(this.$refs.btn);
},
mounted(){
//HTML渲染后操作DOM
console.log('mounted: '+this.$refs.btn);
//组件绑定ref后,获取到的是整个组件对象
console.log(this.$refs.subBtnRef);
}
};
new Vue({
el:'#app',
components:{
App:App
},
template:`<App />`
});
</script>
</html>