Vue父子组件信息通信

父子组件信息通信

父传子(props)

这是父组件

<template>
  <div class="about">
    <h1>将父组件传递给子组件{{father}}</h1>
    <hello-about :father111="father"></hello-about>
  </div>
</template>
<script>
  import HelloAbout from '../components/about/HelloAbout.vue'
export default ({
	//引入组件
  components:{
    HelloAbout
  },
  data(){
    return{
        father:'fatherMessge'
    }
  
  }
})
</script>

这是子组件

<template>
  <div>
      <br>
      <p>将在这里展示子组件</p>
      <h1>{{father111}}</h1>
  </div>
</template>

<script>
export default {
    name:'HelloAbout',
    props:['father111']
}
</script>

<style>

</style>

父传子,传递数组类型

子组件

<template>
  <div>
      <p>从这里遍历数组信息</p>
      <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  </div>
</template>

<script>
export default {
    name:"ArrAbout",
    props:{
        arr:Array
    }
}
</script>

<style>

</style>

父组件

<template>
  <div class="about">
    <h1>将父组件传递给子组件{{father}}</h1>
    <hello-about :father111="father"></hello-about>
    <arr-about :arr="arr"></arr-about>
  </div>
</template>
<script>
  import HelloAbout from '../components/about/HelloAbout.vue'
  import ArrAbout from '../components/arr/ArrAbout.vue'
export default ({
  components:{
    HelloAbout,
    ArrAbout
  },
  data(){
    return{
        father:'fatherMessge',
        arr:['aa','bb','cc']
    }
  
  }
})
</script>

子传递父 $emit

子组件

<template>
  <div>
      <h1>这里是SonClass</h1>
      <button @click="changenum1(3)">子组件修改富足间</button>
  </div>
</template>

<script>
export default {
    name:'SonClass',
    methods:{
      changenum1(number){
        this.$emit('modifynum',number)
      }
    }
}
</script>

<style>

</style>

父组件

<template>
  <div>
    <p>父组件</p>
    <h1>{{num}}</h1>
    <son-class @modifynum="addnum"></son-class>
  </div>
</template>

<script>
    import SonClass from '../components/son/SonClass.vue';
export default {
    name:'Father',
    data(){
      return{
        num:0
      }
    },
    components:{
      SonClass
    },
    methods:{
      addnum(number)
      {
        this.num+=number;
      }
    }
}
</script>

<style>

</style>

子组件调用父组件的方法$parent或$root

父组件调用子组件的方法$refs