<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
<!--加载组件-->
<mycom1 ref="mycom1_tag"></mycom1>
<!--ref是给组件添加个标记,$refs通过这个标记拿到组件-->
<input type="button" value="button" @click.prevent="getEle">
</div>
<template id="tmp1">
<h1>这是组件创建出来的html</h1>
</template>
<script>
var vm1 = new Vue({
el:"#test",
components:{
mycom1:{ // 注意组件名不能带引号, 不能写成"mycom1"
template:"#tmp1",
data(){
return {
"name":"nick",
"age":23
}
},
methods:{
show(){
alert("通过refs调用了组件里面的方法")
}
}
}
},
methods:{
getEle(){
console.log(this.$refs.mycom1_tag.name);
console.log(this.$refs.mycom1_tag.age);
this.$refs.mycom1_tag.show() // 调用组件里面的方法
}
}
})
</script>
</body>
</html>
vue_36 通过ref添加组件标记,$refs拿到组件(拿到组件里面所有的数据)
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
