Vue-Es6导入导出 ，脚手架图片路径，$parent %children

Es6导入导出

        1：默认导出
        <!-- <!--本地使用es6导入script必须加上type="module"
            必须使用live server启动一个域名端口打开页面--> 
        <script type="module">
            /* 导入一个对象 */
            import qwe from './1.js'
            console.log(qwe);
        </script>
    JS：
        export default {
            name:'夏冬'
        }
        2：命名式导入导出
        <script type="module">
        /* 命名式导入必须使用 {} 里面的变量名必须保持一致 */
        import {a,fn} from './2.js'
        console.log(a);
        fn()
        /* export 和 export default区别 */
        /* export可以导出多个变量导出的变量必须要导入的保持一致还需要加上{}
           export default只能导出一个对象 不需要加上{} 导入的名字可以自定义 */
        </script>
    JS：
        let a ='我爱js'
        function fn(){
            console.log('123');
        }
        export {a,fn}
        
     3：改名 as
                    /* 导入的时候改名 */
            import {b,fn as fn2 } from './3.js'
           
            
            /* 导出的时候改名 */
            export {a as b,fn}
     4:导出多个
          /*使用  * as 变量名 导入多个变里*/
        import * as all from './4.js'
         /* all 是一个模块化对象 */

Vue脚手架使用style的方式backgroud是不能解析里面的图片路径

          <!-- 使用style的方式使用backgroud是不能解析里面的路径的 -->
            <!-- 解决方式1 -->
            <!-- 把图片放在根目录public下使用
              /表示public根目录style="background : url( /imgs/1.webp) no-repeat" --> 
            <!--  <div class="img" style="background: url(/imgs/1.webp)"></div> -->
            <!-- 解决方式2 -->
            <!-- 使用require方法把原来不解析的路径手动解析一遍 -->
            <!-- <div class="img" :style="{background: 'url('+require('./assets/1.webp')+') no-repeat'}"></div> -->
            

Vue脚手架 父子传值，子改父$parent %children 子组件

父组件