App页面

<template>

  <div id="app">

    <!-- 组件引入是用两个单词首字母大写的方式引入的

    可以使用小写加-分割 -->

    <!-- .sync 同步修饰符 语法糖 -->

    <!-- ★注意这里是两个组件都在mounted里面触发方法的 -->

    <!-- 两个组件加载的顺序 和你使用时候 使用顺序有关

    比如child-new在前面就先执行 child-new2在后面就后执行  -->

    <!-- 补充★ -->

    <!-- 通过事件总线方式，我们知道了，两个组件实际上在App.vue

    里面的加载是异步的，组件2里面使用created调用方法，肯定比组件1

    里面使用mounted加载的块，使用事件总线是需要先监听事件，这样

    自定义事件触发的时候才可以被知道 -->

    <child-new

      :cList="arrList"

      @delItem="aDel"

      ref="childnew"

      :ctitle.sync="title"

      @childAHandle="AHandle"

    />

    <child-new2

      :childval2="Aval"

    />

  </div>

  <!-- 通过.sync语法糖的形式

  子组件修改父组件传过来的值 -->

</template>

<script>

/* import路径后面的.vue文件名可以省略 */

/* 在vue3里面不推荐使用@，推荐使用相对路径 */

import ChildNew from '@/components/ChildNew'

import ChildNew2 from '@/components/ChildNew2'

export default {

  name: 'App',

  components:{

    ChildNew,

    ChildNew2,

作者：前端许

链接：https://www.jianshu.com/p/b394c18c5099

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。