1.公式紹介：refは、サブコンポーネントインスタンスまたはサブ要素にアクセスするために使用されます
小道具とイベントが存在するにもかかわらず、JavaScriptでサブコンポーネントに直接アクセスする必要がある場合があります。これを実現するには、refこの属性を使用してサブコンポーネントにID参照を指定します。次に例を示します。
<base-input ref="usernameInput"></base-input>
これで、この参照を定義したコンポーネントで、次を使用できます。
this.$refs.usernameInput
<base-input>必要に応じて、この例にアクセスしてください。たとえば、プログラムで親コンポーネントの入力ボックスにフォーカスを当てます。ちょうど今の例では、<base-input>コンポーネントは同様のものをref使用して、指定された内部要素へのアクセスを提供することもできます。次に例を示します。
<input ref="input">
親コンポーネントで定義することもできます。
methods:{
//用来从父级组件聚焦输入框
focus:function(){
this.$ref.input.focus();
}
}
これにより、親コンポーネント<base-input>は次のコードの入力ボックスにフォーカスできます。
this.$ref.usernameInput.focus();
などrefとv-for一緒に使用するときは、取得しrefたデータソースに対応するサブアセンブリを含むこれらの配列であろう。
注：$refsコンポーネントがレンダリングされた後にのみ有効になり、応答しなくなります。これは、サブコンポーネントを直接操作するための「エスケープポッド」にすぎません$ref。テンプレートやコンピュータプロパティでアクセスすることは避けてください。
2.例：サブコンポーネントのデータを取得する
たとえば、最初にサブコンポーネントを宣言します。
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default{
data(){
return{
msg: "hello world"
}
},
methods:{
open:function(){
console.log("被调用了");
}
}
}
</script>
親コンポーネント：ボタンがクリックされると、親コンポーネントのgetHelloメソッドが$ref呼び出されます。getHelloメソッドでは、子コンポーネントのデータデータmsfを呼び出すことにより、通常、子コンポーネントmsgの値が出力されます：hello world、および子コンポーネントのopenメソッドが呼び出されます。呼ばれる。
<template>
<div id="app">
<HelloWorld ref="hello">
<button @click="getHello">获取helloworkd组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default{
components:{
HelloWorld
},
data(){
return{
}
},
methods:{
getHello(){
console.log(this.$ref.hello.msg);
this.$refs.hello.open();
}
}
}
</script>
3.例2：親コンポーネントを呼び出す子コンポーネントのメソッド：
サブアセンブリ：
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用了");
// 调用父组件方法
this.$emit("refreshData");
}
}
}
</script>
親コンポーネント：
ボタンボタンをクリックします。getHelloメソッドでgetHelloメソッドを$refs呼び出し、子コンポーネントのopenメソッドを$emit呼び出して、openメソッドで親コンポーネントのgetDataメソッドを呼び出します。
通常の出力：および111111が呼び出されます
<template>
<div id="app">
<HelloWorld ref="hello" @refreshData="getData"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
}
},
methods: {
getHello() {
this.$refs.hello.open()
},
getData() {
console.log('111111')
}
}
};
</script>