Parent & Child Data transfer

list.vue

<template>
    <div style="border: #00b7ee solid 4px;padding: 20px">
      <h1>This is the tcl test page.</h1>
      <h1>{{this.people}}</h1>
      <ckt :property_test="this.people"></ckt>
      <button @click="demo_method">list.vue组件中的按钮</button>
    </div>
</template>

<script>
import Ckt from '@/views/modules/aaadir/form'
export default {
  name: 'list',
  components: {
    Ckt
  },
  data () {
    return {
      people: {
        name: 'tcl',
        age: 40,
        property: 'company'
      }
    }
  },
  methods: {
    demo_method () {
    //  子组件中的值，由父组件通过property方式传递给子组件，父组件中源数据变化，子组件中的值也会跟着变动
      this.people.age = ++this.people.age
    }
  }
}
</script>

<style scoped>

</style>

form.vue

<template>
    <div style="border: #00b7ee solid 4px; margin: 10px">
      <br><br>
      <h1 style="color: #00b3a4">这是form.vue中的第一行</h1>
      <button @click="demo_method">这是form.vue中的按钮</button>
      <h1 style="color: #00b3a4">这是form.vue中的第二行</h1>
      <h1>{{this.property_test}}</h1>
      <h1>名字为：{{this.property_test.name}}</h1>
      <h1>年龄：{{this.property_test.age}}</h1>
      <h1>类型：{{this.property_test.property}}</h1>
    </div>
</template>

<script>

export default {
  name: 'Ckt',
  // 在子组件定义部分，需要把父组件传递过来的 property_test属性，先在props数组中定义一下（代表这个属性是由父组件传递过来的），这样，才能使用这个数据
  props: ['property_test'],
  watch: {
    property_test: function (newVal, oldVal) {
      console.log(`newVal为:${newVal}`)
      console.log(`oldVal为:${oldVal}`)
    }
  },
  methods: {
    demo_method () {
      console.log('test one.')
      // 下面两种方式可以修改父组件中的值，但是这种随意的修改父组件中的值，会让代码变得难以维护，建议采用显示的 $emit方式。
      // 详情参考：https://jithilmt.medium.com/vue-js-2-two-way-data-binding-in-parent-and-child-components-1cd271c501ba
      // 和下面的方式一样，子组件中值得变化，父组件中变量也会跟着变动。
      // this.property_test.age = this.property_test.age + 1
      // 和上面的方式一样，子组件中值的变化，父组件中变量值也跟着变动。
      this.$set(this.property_test, 'age', ++this.property_test.age)
    }
  }
}
</script>

<style scoped>

</style>