vueはprovideとinjectの応答の問題を解決します。
公式サイトではprovideとinjectが結合されていると言っていますが、応答できません。これは故意にやったのです。しかし、傍受可能なオブジェクトが入ってきたら、オブジェクトの属性はまだ応答可能です。
親子コンポーネントの応答を実現するには、親コンポーネントによって渡されるデータの種類はオブジェクトObjectでなければならず、サブアセンブリによって受信されるデータの種類はオブジェクトObjectでなければならず、他のデータのタイプはいずれも有効ではない。
provideとinjectの応答例:
親コンポーネント:
初期化:
親コンポーネントデータを変更します。入力ボックスの値は「初期」、サブコンポーネントも「初期」を出力します。
サブコンポーネントのデータを変更します。入力ボックスの値は「サブコンポーネント」です。親コンポーネント入力ボックスも「サブコンポーネント」を表示します。
はい、provideとinjectが応答を実現します。親コンポーネントのデータ修正はサブコンポーネントの更新に影響します。サブコンポーネントのデータ修正も親コンポーネントの更新に影響します。
データフォーマットはオブジェクトObjectのタイプで、親コンポーネントがデータを修正することはサブアセンブリに影響を及ぼし、サブアセンブリがデータを修正することは親コンポーネントに影響を与え、対象フォーマットデータが記憶されるのはポインタであり、データではないので、親子コンポーネントは同じオブジェクトを使っています。私がこのように理解しているのは問題があるからです。
補足知識:vue監聴賦課及びprovideとinject
vue親のコンポーネントがサブアセンブリのpropsを変えるときは変わらない。
vm.$once(event、calback)
パラメータ:
{string}イベント
{Function}calback
使い方:
カスタムイベントを待ち受けていますが、一回だけトリガして、最初のトリガの後にモニターを削除します。
vm.$off([event、calback])
パラメータ:
{string Aray<string>イベント(2.2.2+サポート配列のみ)
{Function}[calback]
使い方:
カスタムイベントモニタを削除します。
パラメータが提供されていない場合は、すべてのイベントモニターを削除します。
イベントのみが提供されている場合、イベントのすべてのモニターを削除します。
イベントとコールバックが同時に提供されている場合は、このコールバックのモニターのみが削除されます。
vm.$destroy()
使い方:
実例を完全に廃棄する。他の例との接続を整理し、そのすべての命令およびイベントモニターを接続します。
before Destroyとdestroyedをトリガするフックです。
vueのインスタンスが生成された後、再度データに値を割り当てた場合、自動的にビューに更新されない場合があります。
追加する必要があります。
this.$set(this.ruleForm,'date'time)
vue.set(target,key,value)
パラメータ
{object Aray}target
{string number}key
{any}value
this.$set()はVue.set()と同じ本質的な方法で、前者はmethodsで使用できます。
setメソッドが起動されると、ページ全体の再レンダリングをトリガすることができます。
provide:Object()=>Object
inject:Aray𞓜{[key:string]:string Symbol|Object]
このオプションは、コンポーネントの階層がどれほど深いかに関わらず、祖先のコンポーネントがその子孫の子孫に一つの依存性を注入することを可能にするために一緒に使用され、上下関係が成立するまでの時間にわたって常に有効である。Reactに詳しいなら、これはReactの文脈特性と似ています。
プロvideのオプションは、オブジェクトを返すか、オブジェクトを返す関数です。オブジェクトには、その子孫を注入する属性が含まれています。このオブジェクトでは、keyとしてES 2015 Symborsを使用できますが、元の世代がSymbolとReflect.ownKeysをサポートする環境でのみ動作できます。
injectオプションは、
文字列配列、または
オブジェクト、オブジェクトのkeyはローカルのバインディング名で、valueは以下の通りです。
利用可能な注入内容で検索用のkey(文字列またはSymbol)、または
オブジェクトの種類:
from属性は、利用可能な注入内容で検索するためのkey(文字列またはSymbol)です。
default属性は降格の場合に使用するvalueです。
ヒント:provideとinjectのバインディングは応答できません。これは故意にやったのです。しかし、傍受可能なオブジェクトが入ってきたら、オブジェクトの属性はまだ応答可能です。
例:
provide:
Object()=>Object(オブジェクト1つまたはオブジェクトを返す関数)inject:
Aray𞓜{[key:string]:string Symbol|Object](文字列配列、またはオブジェクト、オブジェクトのkeyはローカルのバインディング名)親子コンポーネントの応答を実現するには、親コンポーネントによって渡されるデータの種類はオブジェクトObjectでなければならず、サブアセンブリによって受信されるデータの種類はオブジェクトObjectでなければならず、他のデータのタイプはいずれも有効ではない。
provideとinjectの応答例:
親コンポーネント:
<template>
<div class="menu">
<label> :</label>
<input v-model="level.name" @change="levelChange(level.name)"/>
<!-- -->
<my-list></my-list>
</div>
</template>
<script>
import MyList from '@/pages/user/children/MyList'
export default {
components:{MyList},
provide(){
return {
userLevel:this.level,
}
},
data(){
return{
level:{name:" "},
}
},
methods:{
levelChange(val){
this.userLevel = this.level;
console.log(this.userLevel )// name
}
}
}
</script>
サブコンポーネント(MyList.vue)
<template>
<div class="my-list">
<p> :{{userLevel.name}}</p>
<label> :</label><input type="text" v-model="userLevel.name">
</div>
</template>
<script>
export default {
// inject:['userLevel'],
inject:{
userLevel:{
default:()=>{}
},
},
data(){
return{
}
}
}
</script>
出力:初期化:
親コンポーネントデータを変更します。入力ボックスの値は「初期」、サブコンポーネントも「初期」を出力します。
サブコンポーネントのデータを変更します。入力ボックスの値は「サブコンポーネント」です。親コンポーネント入力ボックスも「サブコンポーネント」を表示します。
はい、provideとinjectが応答を実現します。親コンポーネントのデータ修正はサブコンポーネントの更新に影響します。サブコンポーネントのデータ修正も親コンポーネントの更新に影響します。
データフォーマットはオブジェクトObjectのタイプで、親コンポーネントがデータを修正することはサブアセンブリに影響を及ぼし、サブアセンブリがデータを修正することは親コンポーネントに影響を与え、対象フォーマットデータが記憶されるのはポインタであり、データではないので、親子コンポーネントは同じオブジェクトを使っています。私がこのように理解しているのは問題があるからです。
補足知識:vue監聴賦課及びprovideとinject
vue親のコンポーネントがサブアセンブリのpropsを変えるときは変わらない。
watch: {
'oState': function (val,oldval) {
this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1})
},
// watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
},
$refs
<ul class="comment-list" v-if="list" ref="commentList"></ul>
scrollToTop () {
this.$refs.commentList.scrollTop = 0
}
$el
this.$refs.student ListDialog.$el.querySelector('.el-dialog')vm.$once(event、calback)
パラメータ:
{string}イベント
{Function}calback
使い方:
カスタムイベントを待ち受けていますが、一回だけトリガして、最初のトリガの後にモニターを削除します。
vm.$off([event、calback])
パラメータ:
{string Aray<string>イベント(2.2.2+サポート配列のみ)
{Function}[calback]
使い方:
カスタムイベントモニタを削除します。
パラメータが提供されていない場合は、すべてのイベントモニターを削除します。
イベントのみが提供されている場合、イベントのすべてのモニターを削除します。
イベントとコールバックが同時に提供されている場合は、このコールバックのモニターのみが削除されます。
vm.$destroy()
使い方:
実例を完全に廃棄する。他の例との接続を整理し、そのすべての命令およびイベントモニターを接続します。
before Destroyとdestroyedをトリガするフックです。
vueのインスタンスが生成された後、再度データに値を割り当てた場合、自動的にビューに更新されない場合があります。
obj:{
arr:[]
}
双方向バインディング後、直接にobj.arrを変えることができません。追加する必要があります。
this.$set(this.ruleForm,'date'time)
vue.set(target,key,value)
パラメータ
{object Aray}target
{string number}key
{any}value
this.$set()はVue.set()と同じ本質的な方法で、前者はmethodsで使用できます。
setメソッドが起動されると、ページ全体の再レンダリングをトリガすることができます。
provide:Object()=>Object
inject:Aray
このオプションは、コンポーネントの階層がどれほど深いかに関わらず、祖先のコンポーネントがその子孫の子孫に一つの依存性を注入することを可能にするために一緒に使用され、上下関係が成立するまでの時間にわたって常に有効である。Reactに詳しいなら、これはReactの文脈特性と似ています。
プロvideのオプションは、オブジェクトを返すか、オブジェクトを返す関数です。オブジェクトには、その子孫を注入する属性が含まれています。このオブジェクトでは、keyとしてES 2015 Symborsを使用できますが、元の世代がSymbolとReflect.ownKeysをサポートする環境でのみ動作できます。
injectオプションは、
文字列配列、または
オブジェクト、オブジェクトのkeyはローカルのバインディング名で、valueは以下の通りです。
利用可能な注入内容で検索用のkey(文字列またはSymbol)、または
オブジェクトの種類:
from属性は、利用可能な注入内容で検索するためのkey(文字列またはSymbol)です。
default属性は降格の場合に使用するvalueです。
ヒント:provideとinjectのバインディングは応答できません。これは故意にやったのです。しかし、傍受可能なオブジェクトが入ってきたら、オブジェクトの属性はまだ応答可能です。
例:
// ‘foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
以上のこのvueはprovideとinjectの応答の問題を解決します。編集者が皆さんに提供した内容を全部共有しています。参考にしていただければと思います。どうぞよろしくお願いします。