Question

我使用vue2.0进行下面的设置。调用some（）方法，更新父级的“位置”。我希望孩子注意更改位置，并在更新时做出相应的反应。但是，从不调用孩子的监视方法。请问这里有什么问题吗？

谢谢，

// parent
import home from './components/home.vue'

var App = window.App = new Vue({
data: {
  place: '',
},
methods: {
  something: function(event) {
    this.place = 'some new place'
  })
},
components: {
  'home': home,
}
}).$mount('#app')

// child ('./components/home.vue')
export default {
  props: ['place'],
  // need to react here when place changes
  watch: {
    place: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
}

Answer 1

你是否将地方道具传递给组件？

这是一个工作片段：

＆＃13;

var home = {
  props: ['place'],
  template: '<div>home: {{ place }}</div>',
  watch: {
    place: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
};

var App = new Vue({
  el: '#app',
  components: {
    'home': home
  },
  data: {
    place: 'somewhere'
  },
  methods: {
    something: function(event) {
      this.place = 'some new place'
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="something">set place</button>
  <p>app: {{ place }}</p>
  <home :place="place"></home>
</div>

＆＃13;

使用道具的Vue.js父子沟通

1 个答案: