Rumah > hujung hadapan web > tutorial css > Vuejs2.0子组件调用父组件的方法

Vuejs2.0子组件调用父组件的方法

小云云
Lepaskan: 2018-02-09 11:40:12
asal
2261 orang telah melayarinya

有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,本文主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下,希望能帮助到大家。

不多说上代码:

子组件:


<template> 
  <p class="isShowing" ref="isShowing"> 
    <p class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> 
      <ul ref="scroll_warpper_ul"> 
        <li class="menu-item" @click="goToFatherDetail(233)"> 
        </li> 
      </ul> 
    </p> 
    <v-loading class="isloading" v-show="hid_show_switch"></v-loading> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push(&#39;goToDetail&#39;); 
        console.log(&#39;子组件方法走了&#39; + itemId); 
        this.$emit(&#39;refreshbizlines&#39;, itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> 
      } 
    } 
  }; 
</script>
Salin selepas log masuk

父组件:


<template> 
  <p class="main-wrapper"> 
      <p class="tab-wrapper"> 
        <p class="tab-item"> 
          <router-link to="/isShowing" class="table-item-text">正在热映</router-link> 
        </p> 
        <p class="tab-item"> 
          <router-link to="/willShow" class="table-item-text">即将上映</router-link> 
        </p> 
      </p> 
    </p> 
    <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> 
  </p> 
</template> 
<script type="text/ecmascript-6"> 
  export default { 
    methods: { 
      goToDetail (itemId) { 
        console.log(&#39;父组件走你:&#39; + itemId); 
      } 
    }<strong> 
  }; 
</script></strong>
Salin selepas log masuk

父组件用 v-on 来做个监测的函数来检测,最终生成的代码是 类似


on: {
   "refreshbizlines": function($event) {
    _vm.goToDetail(123)
}
}
Salin selepas log masuk

所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ,访问了,则执行 refreshbizline 下面的 函数

goToDetail -- 也就是父组件的

goToDetail函数

注意 父组件 的


v-on:refreshbizlines="goToDetail"
Salin selepas log masuk

 一定要放在 你父组件调用子组件的 模块名上。

相关推荐:

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法_javascript技巧

Atas ialah kandungan terperinci Vuejs2.0子组件调用父组件的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan