一、父组件向子组件传值

父组件：

<template>
  <div>
      <div>
          <children :msg="sendData"></children>
          <button @click="upDate">改变</button>
      </div>
  </div>
</template>
<script>
import children from '@/components/children.vue'
export default {
  name: '',
  data () {
    return {
        sendData:'父组件数据'
    }
  },
  components:{
      children
  },
  methods:{
      upDate(){
          this.sendData='父组件给的值改变了'
      }
  }
}
</script>

子组件：

<template>
  <div>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  props: ["msg"],
};
</script>

运行时的界面：

点击改变按钮后：

二、子组件监听值的变化

子组件：

增加代码：

watch: {
    msg: {
      handler(val) {
        console.log("msg change", val);
        //当监听的值发生改变后，可以在这里做些什么...
      },
      immediate: true, // 初次监听即执行
    },
  },

页面效果:

END