Vue组件实例间的直接访问 - Web

TOP

Vue组件实例间的直接访问(二)

2017-10-10 15:34:07 【大中小】浏览:8238次

源

<div id="example">
  <parent-component></parent-component>
</div>
<template id="parent-component">
  <div class="parent">
    <h3>我是父组件</h3>
    <button @click="getData">获取子组件数据</button>
    <br>
    <div v-html="msg"></div>
    <child-component1></child-component1> 
    <child-component2></child-component2>   
  </div>
</template>
<template id="child-component1">
  <div class="child">
    <h3>我是子组件1</h3>
    <input v-model="msg">
    <p>{{msg}}</p>
  </div>
</template>
<template id="child-component2">
  <div class="child">
    <h3>我是子组件2</h3>
    <input v-model="msg">
    <p>{{msg}}</p>
  </div>
</template>

<script>
// 注册
Vue.component('parent-component', {
  template: '#parent-component',
  data(){
    return{
      msg:'',
    }
  },
  methods:{
    getData(){
      let html = '';
      let children = this.$children;
      for(var i = 0; i < children.length;i++){
        html+= '<div>' + children[i].msg + '</div>';
      }
      this.msg = html;
    }
  },
  components:{
    'child-component1':{
      template:'#child-component1',
      data(){
        return{
          msg:'',
        }
      },
    },
    'child-component2':{
      template:'#child-component2',
      data(){
        return{
          msg:'',
        }
      },
    }, 
  }   
})
// 创建根实例
new Vue({
  el: '#example',
})
</script>

$refs

　　组件个数较多时，难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便

　　在子组件上使用ref属性，可以给子组件指定一个索引ID：

<child-component1 ref="c1"></child-component1>
<child-component2 ref="c2"></child-component2>

　　在父组件中，则通过$refs.索引ID访问子组件的实例

this.$refs.c1
this.$refs.c2

<div id="example">
  <parent-component></parent-component>
</div>
<template id="parent-component">
  <div class="parent">
    <h3>我是父组件</h3>
    <div>
      <button @click="getData1">获取子组件c1的数据</button>
      <p>{{msg1}}</p>
    </div>
    <div>
      <button @click="getData2">获取子组件c2的数据</button>
      <p>{{msg2}}</p>
    </div>
    <child-component1 ref="c1"></child-component1> 
    <child-component2 ref="c2"></child-component2>   
  </div>
</template>
<template id="child-component1">
  <div class="child">
    <h3>我是子组件1</h3>
    <input v-model="msg">
    <p>{{msg}}</p>
  </div>
</template>
<template id="child-component2">
  <div class="child">
    <h3>我是子组件2</h3>
    <input v-model="msg">
    <p>{{msg}}</p>
  </div>
</template>

<script>
// 注册
Vue.component('parent-component'

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：JS倒计时——天时分秒	下一篇：单文件文件上传到服务器（HTML5+j..