vue 组件传值 父传子及注意事项

子组件在哪里使用，哪里就是子组件的父级；
其中bartitle 为在父组件中注册的名字；
自定义属性通过 ：绑定，本文中例子，自定义属性为 :titleTextMain
1、通过import 引入子组件，并起名字 bartitle；
2、在script中components中注册；
3、在页面使用
注意事项：
1、在页面使用中不能使用驼峰命名，如果引入为barTiltle，那再页面需要写成bar-title；

父组件代码

<template>
  <div class="mainPage">
        <div class="title" >
        
            <bar-title :titleTextMain = 'mainTitle' ></bar-title>
        </div>
        <div class="content">
            {{showSubtitle}}
        </div>
  </div>
</template>

<script>
import bartitle from "../components/bartitle"
export default {
    data(){
        return {
            mainTitle:'个人中心首页',
            showSubtitle:''
        }
    },
    components:{
        bartitle
    }        
    }
</script>

子组件通过props:[ " titleTextMain "]接收
1、在computed中执行，如果传递过来内容显示传递过来的内容titleTextMain，否则显示默认内容titleText，
子组件代码

<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: "主页"
    };
  },
  props: ["titleTextMain"],
  computed: {
    showTitle() {
      return this.titleTextMain ? this.titleTextMain : this.titleText;
    },
  },
};
</script>