父子组件通信

1、父子通信props

父组件控制自己的data，通过props将数据传递给子组件，子组件使用父组件传递的数据，组件要使用自定义属性，必须要在props里边进行声明，通过props声明的属性可以在this里获取到，props里的数据和data里的数据的用法一样，

为了保证数据的单向流动性，props里的数据只能使用，不能修改

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
  <style>
    .son {
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <father></father>
  </div>
  <!-- 父组件 -->
  <template id="father">
    <div>
      <button @click="toggle">toggle</button>
      这里是父组件
      <hr>

      <!-- 通过自定义属性将数据传递给子组件 -->
      <son :fathershow="show"></son>
     
    </div>
  </template>

   <!-- 子组件 -->
   <template id="son">
    <div>
      这里是子组件
      <div v-show='fathershow' class="son"></div>
    </div>
  </template>
<script>
  Vue.component('father', {
    template: '#father',
    data() {
      return{
        show: true
      }
    },
    methods: {
      toggle() {
        this.show =!this.show
      }
    }
  })

  Vue.component('son', {
    template: '#son',
    props: ['fathershow'],
    data() {
      return {
        // show: false,
      }
    },
    mounted() {
      console.log(this)
    }
  })
  new Vue({}).$mount('#app')
  /*
  子组件有一个div 父组件控制div的显示隐藏

  父组件控制自己的data数据，然后通过props 将数据传递给子组件，子组件使用父组件传递的数据
  组件要使用自定义属性必须通过props声明，通过props声明的数据可以在this里获取到
  props里的数据和data里的数据用法一样
  props里的数据为了保证数据的单项流动 只能使用不能修改
  */ 
</script>

 

posted @ 2022-05-06 20:33  倚栏听风时  阅读(163)  评论(0)  编辑  收藏  举报