平邑网站建设,模板企业网站,天津网站推广宣传,手机微信网页版ref标签
作用#xff1a;用于注册模板引用。 用在普通DOM标签上#xff0c;获取的是DOM节点。用在组件标签上#xff0c;获取的是组件实例对象。 DOM#xff1a;
templatediv classpersonh2 reftitle2上海/h2用于注册模板引用。 用在普通DOM标签上获取的是DOM节点。用在组件标签上获取的是组件实例对象。 DOM
templatediv classpersonh2 reftitle2上海/h2button clickshowTitle2显示title2/button/div
/templatescript langts setup namePerson
import { ref, onMounted } from vue
// 创建一个title2的ref
let title2 ref();function showTitle2() {console.log(title2.value);
}
/script组件
父组件
templatediv idapph2 reftitle2北京/h2button clickshowTitle2显示title2/buttonPerson refpsn //div
/templatescript lagnts setupimport Person from ./components/Person.vue;import { ref, onMounted } from vue;// 创建一个title2的reflet title2 ref();let psn ref();function showTitle2() {console.log(title2.value);}
/scriptstyle scoped.app {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
/style子组件
需要将想让父组件查看的ref标签导出。
使用defineExpose。
templatediv classpersonh2 reftitle2上海/h2button clickshowTitle2显示title2/button/div
/templatescript langts setup namePerson
import { ref, onMounted } from vue
// 创建一个title2的ref
let title2 ref();function showTitle2() {console.log(title2.value);
}defineExpose({title2
})
/scriptstyle的scoped
组件中style添加scoped属性表示只有当前组件对应得模板templete内的可以使用其他组件不能使用。
templatediv idapph2 reftitle2北京/h2button clickshowTitle2显示title2/buttonPerson refpsn //div
/templatescript lagnts setupimport Person from ./components/Person.vue;import { ref, onMounted } from vue;// 创建一个title2的reflet title2 ref();let psn ref();function showTitle2() {console.log(title2.value);}
/scriptstyle scoped.app {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
/style
