vue 组件传值 子传父

父组件代码
1、父组件中需要做的是，定义一个方法；
2、其中changeTitle是子组件通过$emit(第一个参数，第二个参数)传递过来时的第一个参数
3、在方法 chengtitleA 中进行子组件传递过来的数据操作；

<template>
  <div class="mainPage">
        <div class="title" >
            <bartitle  @changeTitle='chengtitleA'></bartitle>
        </div>
        <div class="content">
            {{showSubtitle}}
        </div>
  </div>
</template>

<script>
import bartitle from "../components/bartitle"
export default {
    data(){
        return {
            showSubtitle:''
        }
    },
    components:{
        bartitle
    },
    mounted(){
        
    },
    methods:{
        chengtitleA(subtitle){
            console.log(subtitle,"==============")
            this.showSubtitle = subtitle.sendMain
        }
    }
}
</script>

<style>

</style>

子组件代码如下：
1、需要给子组件绑定一个方法 本文例子为@click=”tanchu()“
2、在绑定的方法中通过$emit 传递，
其中：
第一个参数为父组件的行间绑定的；
第二个参数为传递的值（可以写单独的值，也可以写对象传递）；
3、父组件接受，并处理数据；

<template>
  <div class="title" @click="tanchu()">
    <img src="../assets/logo.png" alt />
    <div class="subtitle">{{showTitle}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleText: "主页",
      sendMain:'身份验证'
    };
  },
  methods: {
      tanchu(val){
          console.log(val)
          alert(val)
          this.$emit("changeTitle",{ sendMain:this.sendMain})
        }
  },
};
</script>

<style>
</style>