Vue.jsのrefsとemit

refs

this.$refsはref="childComponent"をつけた子コンポーネントを親コンポーネントでthis.$refs.childComponent.childMethod();で親コンポーネントから子コンポーネントのメソッドやthis.$refs.childComponent.childData = "";などと親コンポーネントから子コンポーネントのdata属性にアクセスができます。

子コンポーネント側

data() {
  return {
    childData: "child data";
  }
}
methods: {
  childMethod() {
     alert("call child method!");
  }
}

親コンポーネント側

<ChildComponent ref="childComoonent" />

methods : {
  callChildMethod() {
    this.$refs.childComponent.childMethod();
  }
  getChildData() {
    const childData =  this.$refs.childComponent.childData;
    console.log(childData);
}

emit

this.$emitは子コンポーネントから親コンポーネントにdataが渡せます。

子コンポーネント側

<div @click="$emit('click',childData)”>click me!</div>

親コンポーネント側

<ChildComponent @click="parentData = $event"/>

$eventにchildDataの値が渡ります。