vueの親コンポーネント呼び出しサブコンポーネントのプロパティと方法

1508 ワード

親コンポーネントのパス props サブコンポーネントにデータが下に渡され、$emitによってeventsがトリガーされます. 親コンポーネントにメッセージを送信します.
Propsやイベントがあるにもかかわらず、JavaScriptでサブコンポーネントに直接アクセスする必要がある場合があります.refプロパティを使用する必要があります.  ref  プロパティは、このサブコンポーネントにID参照を付与します.
ref:要素またはサブコンポーネントに参照情報を登録するために使用され、参照情報は親コンポーネントの$refsオブジェクトに登録されます.通常のDOM要素で使用される場合、通常のDOM要素を指します.
refの3つの使用シーン:
  • refは通常の要素に加算され、this.$refs.nameで取得されたのはdom要素です.
  • refはサブコンポーネントに追加され、親コンポーネントでthis.$refs.nameで取得されたコンポーネントインスタンスは、コンポーネントのすべてのプロパティとメソッドを呼び出すことができます.
  • refはv-forとともに使用され、this.$refs.nameで取得されるのは、対応するデータソースを含むこれらのサブコンポーネントまたはDOM要素の配列である.

  • 1.refは通常の要素に加算されます.
    var app=new Vue({ el:"#app", data:{ }, methods:{ get:function(){ console.log(this.$refs.input); } } })

    2. refはサブコンポーネントに追加され、親コンポーネントで参照されます.
    Vue.component('childComponent',{ template:"
    " }) var app=new Vue({ el:"#app", data:{ }, methods:{ get:function(){ console.log(this.$refs.child); } } })

    まとめ:
    親コンポーネントは、サブコンポーネントまたはDOM要素の属性とメソッドを呼び出します.
    this.$refs.refName.  
    this.$refs.refName.  

    サブコンポーネントまたはDOM要素は、親コンポーネントの属性またはメソッドを呼び出します.
    this.$parent.  
    this.$parent.