VueJs 2.0 - 如何聆聽「道具」變化

在VueJs 2.0 docs中，我找不到任何會在props上進行偵聽的掛鉤。VueJs 2.0 - 如何聆聽「道具」變化

VueJs是否有類似onPropsUpdated()或類似的鉤子？

更新

由於@wostex的建議，我想我的watch財產，但什麼都沒有改變。然後我意識到，我有一種特殊情況：

<template> 
    <child :my-prop="myProp"></child> 
</template> 

<script> 
    export default { 
     props: ['myProp'] 
    } 
</script>

我傳遞myProp父組件接收到child組件。然後watch: {myProp: ...}不起作用。

來源

2017-06-16 zatziky

可能的[VueJS 2.0 - 無法在道具更新上掛鉤組件]（https://stackoverflow.com/questions/44584078/vuejs-2-0-cant-hook-a-component-on-props-update） – Bert

我不確定我是否正確理解您的案例。你能解釋一下你的確切目標嗎？「什麼時候發生，我想在這裏發生什麼事（哪裏？）」。您是否嘗試手動更改父項目值？如果是，這是完全不同的情況。 – wostex

@wostex，這裏是[CodePen]（https://codepen.io/Nobo/pen/ZyBVvo?editors=1010#0）。壞的是，它在筆中正在工作...... – zatziky

可以watch道具在道具的變化執行一些代碼：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'Hello' 
 
    }, 
 
    components: { 
 
    'child' : { 
 
     template: `<p>{{ myprop }}</p>`, 
 
     props: ['myprop'], 
 
     watch: { 
 
     \t myprop: function(newVal, oldVal) { // watch it 
 
      console.log('Prop changed: ', newVal, ' | was: ', oldVal) 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <child :myprop="text"></child> 
 
    <button @click="text = 'Another text'">Change text</button> 
 
</div>

來源

2017-06-16 08:27:11 wostex

Thx for wostex，我已經用'watch'試過了。由於你的例子，我意識到我的情況有點不同。我更新了我的問題。 – zatziky

看它看起來像componentWillReceiveProps（），謝謝你的例子：D – yussan

@yussan是的，但它適用於你需要跟蹤的單個道具。 – wostex

不知道你是否已經解決它（如果我理解正確的話），但這裏是我的主意：

如果父母收到myProp，並且您希望它傳遞給孩子並在孩子身上觀看，那麼父母必須擁有myProp副本（不參考）。

試試這個：

new Vue({ 
    el: '#app', 
    data: { 
    text: 'Hello' 
    }, 
    components: { 
    'parent': { 
     props: ['myProp'], 
     computed: { 
     myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array 
     } 
    }, 
    'child': { 
     props: ['myProp'], 
     watch: { 
     myProp(val, oldval) { now val will differ from oldval } 
     } 
    } 
    } 
}

和HTML：

<child :my-prop="myInnerProp"></child>

實際上你在這種情況下複雜的收藏工作時要非常小心（向下穿過幾次）

來源

2017-11-28 09:14:13

好主意。我現在不能只驗證它。當我再次使用vue時，我會檢查它。 – zatziky

VueJs 2.0 - 如何聆聽「道具」變化

回答

相關問題