vue 父子组件通讯

父组件---->子组件

方法：props

 1.父组件

<template>
  <div>
      <!-- 
          父组件传title属性到子组件
          注：:titleName="title"  前面是子组件自定义名称，后面是父组件自定义名称
       -->
      <tips :titleName="title" :obj="obj"></tips>
  </div>
</template>

<script>
import tips from "@/components/tips/index.vue"
export default {
    components:{
        tips
    },
    data(){
        return{
            title:"我是标题",
        }
    }
}
</script>

2.子组件

<template>
  <div>
    <div>{{ titleName }}</div>
  </div>
</template>

<script>
export default {
  props: {
    // titleName是父组件传过来的属性  
    titleName: {
      type: String,
      default: "默认值"
    },
  }
};
</script>

3.效果图

 子组件--->父组件

方法：this.$emit('自定义名称',参数)

1.父组件

<template>
  <div>
      <!-- 
          @child="father"
          @child是子组件自定义方法名称
          father是父组件自定义方法名称
       -->
      <tips @child="father"></tips>
  </div>
</template>

<script>
import tips from "@/components/tips/index.vue"
export default {
    components:{
        tips
    },
    methods:{
        father(age){
            console.log('吃饭不吃菜',age);
        }
    }
}
</script>

2.子组件

<template>
  <div>
    <div @click="click">我是子组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18
    };
  },
  methods: {
    click() {
      this.$emit("child", this.age);
    }
  }
};
</script>

3.效果图