vue中父组件通过props传值同步问题

Question

直接上代码：

    // html
    <div id="app">
      <p @click="clickChange">click me</p>
      <my-child :test="test"></my-child>
    </div>
    
    // js
    Vue.component('my-child', {
        props: [
          'test'
      ],
      data() {
          return {
            myTest: this.test
        }
      },
      template: '<div>{{ myTest }}</div>'
    })
    new Vue({
      el: "#app",
      data: {
        test: 'test'
      },
      methods: {
          'clickChange' () {
            this.test = 'haha'
          console.log(this.test)
        }
      }
    })

当父组件传过来的test改变时，但子组件赋值到的myTest却没有改变，请问有什么方法可以快捷得到吗？除了watch方法以外

Answer 1

可以在子组件template中直接绑定test或者使用computed return test; 然后将计算属性绑定到模板中

Answer 2

computed: {
    myTest() {
        return this.test
    }
}