親コンポーネントから子コンポーネントのメソッドを実行したいのですが、子コンポーネントの指定ができず、子コンポーネントのメソッドが実行できません。
具体的には、子コンポーネントにrefを指定しても、undifindが帰ってきます。
親から子コンポーネントの関数を実行することが出来ないことがわかりました。
vueの方針として、propの状態変化でイベントを起こすことを推薦しているようなので、propの監視で対応しようと考えました。
なんども申し訳ありません。
できる様です。
ただ、私の場合だと、というエラーが出てしまい、methodsに登録してるメソッドを読むことが出来ず、
発火できません。
Error in mounted hook: "TypeError: Cannot read property 'メソッド名' of undefined"
監視にwatchを使ってみようと考えたのですが動きません。
propに対して、watchを起動させるにはどうしたらよいでしょうか？
親コンポーネント
親コンポーネントで、changeCompchangeCompをい実行するとalertが発火する想定。
記述ミスがあったため修正します。
実際のコードから抜粋しているので、設定を書き忘れていた箇所がありました。
<template">
<child-component ref="child" v-bind:is-comp="this.$data.isComp"></child-component>
</template>
<script>
import child-component from 'child-component'
export default {
methods: {
data() {
return {
isComp: false
}
},
components {
child-component
}
initializeChild() {
const { child } = this.$refs
// 子コンポーネントを呼ぶ
child.reset();
},
changeComp() {
this.$data.isComp = true
}
}
mounted() {
initializeChild();
}
}
</script>子コンポーネント
<template">
<div class="chilid-container">
<p>子コンポーネント</p>
</div>
</template>
<script>
export default {
prop['isComp'],
watch: {
isComp: function(val) {
this.reset()
}
}
methods: {
reset() {
console.log('reset')
}
}
}
</script>試した事
- propではなく、同じコンポーネントのdataの値を設置してみた
-> 反応しない。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
watchの場合(追記)
<style>
#app {
background: salmon;
width: 200px;
}
textarea {
height: 300px;
}
.childcomp {
background: gray;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="app">
<button v-on:click="increment">increment</button>
<childcomp ref="child" v-bind:count="state.count"></childcomp>
<textarea>{{ state.log }}</textarea>
</div>
<script>
let state = { log: '', count: 0 };
Vue.component('childcomp', {
props: ['count'],
template: `
<div class="childcomp">
<button v-on:click="increment">increment</button>
<div>{{ count }}</div>
</div>
`,
methods: {
increment: function() {
state.count += 1;
},
},
watch: {
count: function() {
state.log += 'on counted!\n';
}
}
});
vm = new Vue({
el: '#app',
data: { state },
methods: {
increment: function(event) {
state.count += 1;
},
},
});
</script>
</body>$ref['child']の場合
試してたら、this.$refs['child'].someMethod(); でいけました。ただ、試している中で、this.$refs['child'][0].someMethod(); でいけたこともあって、すこし謎です。
<style>
#app {
background: salmon;
width: 200px;
}
textarea {
height: 300px;
}
.childcomp {
background: gray;
width: 100px;
height: 50px;
}
</style>
<body>
<div id="app">
<button v-on:click="say">say(parent)</button>
<button v-on:click="say2">say2(child from parent)</button>
<div>
<childcomp ref="child"></childcomp>
</div>
<textarea>{{ state.log }}</textarea>
</div>
<script>
let state = { log: '' };
Vue.component('childcomp', {
props: ['post'],
template: `
<div class="childcomp">
<button v-on:click="say">say(child)</button>
</div>
`,
methods: {
say: function(event) {
state.log += 'i am child.\n';
}
}
});
vm = new Vue({
el: '#app',
data: { state },
methods: {
say: function(event) {
state.log += 'i am parent.\n';
},
say2: function(event) {
this.$refs['child'].say(null);
},
},
});
</script>
</body>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
euledge
2018/11/02 09:14
https://teratail.com/questions/88988 に同様の質問があるようです。作法的にはpropsで渡したものを子供が反応するのが正攻法です。
hasshy
2018/11/02 09:50
情報をご共有いただきありがとうございます！なるほど、refが効かない件理解できました。検討してみます。
退会済みユーザー
2018/11/02 16:33 編集
回答に差し替えました。
退会済みユーザー
2018/11/02 17:23
念のための確認ですが、<child-component ...の部分って、ブラウザで確認して、<p>に変わっていますか？
hasshy
2018/11/02 17:35
度々申し訳ありません、divで囲んでいる処理が抜けていました。pタグは出力されます。
hasshy
2018/11/02 17:35
度々申し訳ありません、divで囲んでいる処理が抜けていました。pタグは出力されます。
この投稿は削除されました
退会済みユーザー
2018/11/02 18:02
いえいえ、全然大丈夫です。コンポーネントはうまく置き換わっているぽいですね。
hasshy
2018/11/02 18:07
ありがとうございます。なんとなくわかってきました。もしかしたら、mountedのタイミングで実行しようとしたのが問題かもしれません。