- <div id="app">
- <navbar></navbar>
- <pagefooter></pagefooter>
- </div>
- Vue.component('navbar',{
- template:'#navbar',
- data:function () {
- return {
- navs:[]
- }
- }
- });
- Vue.component('pagefooter',{
- template:'#pagefooter',
- data:function () {
- return {
- footer:''
- }
- }
- });
- new Vue({
- el:'#app',
- mounted:function () {
- //ready,
- //这里怎么直接访问navbar的navs和pagefooter的footer值呢,
- }
- })
这就用到ref了
修改组件
- <div id="app">
- <navbar ref="navbar"></navbar>
- <pagefooter ref="pagefooter"></pagefooter>
- </div>
- new Vue({
- el:'#app',
- mounted:function () {
- //ready,
- //这里怎么直接访问navbar的navs和pagefooter的footer值呢,
- console.log(this.$refs.navbar.navs);
- console.log(this.$refs.pagefooter.footer);
- }
- })
如果仅仅用到一个普通标签上
- <div ref="demo"></div>
他的作用和:
- document.querySelector('[ref=demo]');
的作用一样
官方文档:
尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如:
- <div id="parent">
- <user-profile ref="profile"></user-profile>
- </div>
- var parent = new Vue({ el: '#parent' })
- // 访问子组件实例
- var child = parent.$refs.profile
当 ref 和 v-for
一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。
$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。
来源:https://segmentfault.com/a/1190000009052002