コード

index.html

html
1<!doctype html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>Hello, world!</title>
5</head>
6
7<body>
8    <div id="app">
9        <App></App>
10    </div>
11    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
12    <script src="https://unpkg.com/http-vue-loader"></script>
13    <script src="https://unpkg.com/vue-observe-visibility@0.4.2"></script>
14    <script>
15      Vue.use(VueObserveVisibility)
16
17        const app = new Vue({
18            el: '#app',
19            components: {
20                'App': httpVueLoader('./App.vue'),
21            }
22        })
23    </script>
24</body>
25
26</html>

App.vue

vue
1<template>
2<div>
3  <!-- #firstboxでの動作は確認 -->
4  <div id="firstbox">
5    <h5>FirstBox</h5>
6  </div>
7
8  <!-- 外部コンポーネント"box" -->
9  <box></box>
10
11</div>
12</template>
13
14<script>
15  module.exports = {
16    components: {
17      'box': httpVueLoader('components/box.vue'),
18    },
19    data() {
20      return {
21        inview: [],
22      }
23    },
24    methods: {
25      visibilityChanged(isVisible,entry) {
26        var id = entry.target.id;
27        var inview = this.inview;
28        if(entry.isIntersecting === true){
29          if (inview.indexOf(id) == -1){
30            inview.push(id);
31            entry.target.classList.toggle("fadeIn")
32          }
33
34        }else{
35          if (inview.indexOf(id) >= 0){
36            inview.splice(inview.indexOf(id), 1);
37            entry.target.classList.toggle("fadeIn")
38          }
39        }
40        if(this.inview.length > 0){
41          console.log(this.inview)
42        }
43      }
44    }
45  }
46</script>

box.vue

vue
1<template>
2  <div>
3
4    <!-- ここで親コンポーネントのvivibilityChangedメソッドを呼びたいです -->
5    <div id="outer-box1" v-observe-visibility="{callback: visibilityChanged}">
6      <h5>OuterBox1</h5>
7    </div>
8
9    <!-- ここで親コンポーネントのvivibilityChangedメソッドを呼びたいです -->
10    <div id="outer-box2" v-observe-visibility="{callback: visibilityChanged}">
11      <h5>OuterBox2</h5>
12    </div>
13
14    <!-- ここで親コンポーネントのvivibilityChangedメソッドを呼びたいです -->
15    <div id="outer-box3" v-observe-visibility="{callback: visibilityChanged}">
16      <h5>OuterBox3</h5>
17    </div>
18
19  </div>
20</template>

行動規範の内容に同意します

回答1件

ベストアンサー

propsとして親から子に関数を渡せば良いです。

親

html
1<box visibility-changed="this.visibilityChanged"></box>

子

js
1props: {
2  visibilityChanged: Function,
3}

動作確認はしてませんがこんな感じかと。
適切ならば子の方で this.visibilityChanged() で呼び出せるはずです。

参考

https://jp.vuejs.org/v2/guide/components-props.html
https://teratail.com/questions/102635

投稿2019/07/24 00:47

編集2019/07/24 01:10

退会済みユーザー

総合スコア0

退会済みユーザー

2019/07/24 02:19

回答いただきありがとうございます。ご提示いただいた方法を試したのですがv-observe-visibilityが動作しませんでした。また、box.vue全体ではなく、boxvue内の各div要素でv-observe-visibility="{callback: this.visibilityChanged}"を呼びたいのですが可能でしょうか？よろしくお願いいたします。

退会済みユーザー

2019/07/24 02:33 編集

> v-observe-visibility これをよくしりませんが、まずFunctionを子に受け渡すということができることを確認してみて下さい。 visibilityChanged関数の中にconsole.log('test')とか仕込んで、子の方で <input @input="visibilityChanged(引数)"></input> こういうのを書いて文字を入力した際にデベロッパーツールコンソールで'test'が出るか見るとか。 > また、box.vue全体ではなく、boxvue内の各div要素でv-observe-visibility="{callback: this.visibilityChanged}"を呼びたいのですが可能でしょうか？ちょっと意味がわかってないかもしれませんがその各div要素をさらに子コンポーネントとすれば良いのではないでしょうか。

退会済みユーザー

2019/07/24 02:28

あくまで「vueで子コンポーネントから親コンポーネントのメソッドを呼ぶ方法」を回答しているので、質問が広がる場合はこれは解決済みにして次の質問を立てて下さい。

行動規範の内容に同意します