vue親コンポーネントは$refsでサブアセンブリの値と方法を取得します。

2098 ワード

前言
vueプロジェクトではコンポーネント間の通信はよくある問題であり、同時に重要な問題でもあります。私たちは大きく分けて三つの状況に分けられます。
親サブ：親コンポーネントで値をバインディングし、サブアセンブリでpropsで受信する
子传父：父コンポーネントでイベントを傍受し、このイベントをサブアセンブリで起動し、データを第二のパラメータとして持っていくと、父コンポーネントでイベントを傍受するコールバック関数が呼び出されます。コールバック関数のパラメータはサブアセンブリが持ってきたデータです。これは親コンポーネントでサブアセンブリのデータを使用することができます。
兄弟の間の伝達：私達はイベントバスを使って簡単に解決できます。実は購読者モードを発表します。
今日私たちが見たいのは、親のコンポーネントがどのように直接的にサブアセンブリのデータと方法を調整するかであり、サブアセンブリを通して送られてきたのではない。
ここでは、親のコンポーネントが直接イベントを取るのは親のコンポーネントで、サブコンポーネントがデータを送ってくることを理解したいです。イベントはサブコンポーネントで、全く異なる2つのケースです。
コードの展示
サブコンポーネントchildren.vueは、サブコンポーネントでデータsonDataとメソッドsonMethodを定義します。


// children.vue

<template>
 <div>   children</div>
</template>

<script>
export default {
 data: () => ({
  sonData: '        ！'
 }),
 methods: {
  sonMethod() {
   console.log('        ！')
  }
 },
 computed: {
  
 },
 created() {

 }
}
</script>

親コンポーネントファイル


//    

<template>
 <div>
  <children ref='ch'>
  </children>
  <h1 @click="onclick">   </h1>
 </div>
</template>

<script>
import children from './coms/children'
export default {
 data() {
  return {}
 },
 components: {
  children
 },
 methods: {
  onclick() {
  //    let chil = this.$refs['ch']
   let chil = this.$refs.ch

  //        $refs        
  //            methods     data    
   console.log(chil) //     
   console.log(chil.sonData) //         
   console.log(chil.sonMethod()) //         
  }
 }
}
</script>

注意事項
ref自体はレンダリングの結果として作成されているので、初期レンダリング時にそれらにアクセスできません。それらはまだ存在しません。したがって、応答式ではなく、テンプレートや属性の計算には使えません。
以上のこのvue親コンポーネントは$refsを通してサブアセンブリの値と方法を獲得しました。詳しくは小編が皆さんに共有している内容です。参考にしてもらいたいです。どうぞよろしくお願いします。

Vue修正項目の起動ポート番号方法

vue基本的な使用--refsはコンポーネントまたは要素の例を取得する。