vue基础篇 07 vue基础内容补充3

07 vue基础内容补充3

非父子组件通信

非父子组件关系包括多个层级的组件，也包括兄弟组件的关系

这种非父子组件通信在低版本可以通过$dispatch和$broadcast完成，但是在Vue2.x中两个都被取消了

在Vue2.x中有一种通过中央事件总线的策略，但是与将来会学习的Vuex的状态管理方案对比要逊色得多

插槽slot

子组件中可以使用slot标签为子组件开启一个插槽，其插入的内容取决于父组件如何使用

基本使用

代码

<div id="app">
  <cpn></cpn>
  <cpn><span>span</span></cpn>
  <cpn><i>i</i></cpn>
  <cpn>
    <i>i</i>
    <div>div</div>
    <p>p</p>
  </cpn>
</div>

<template id="cpn">
  <div>
    <h2>h2</h2>
    <p>p</p>
    <slot><button>button</button></slot>
  </div>
</template>

效果

具名插槽

代码

<div id="app">
  <cpn><span slot="right">right</span></cpn>
  <cpn>
		<button slot="left">left</button>
		<button slot="center">center1</button>
		<button slot="center">center2</button>
	</cpn>
</div>


<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

效果

作用域插槽

当父组件要给子组件插槽时需要用到子组件的数据，也就是说内容在子组件,父组件想插槽告诉子组件如何展示，这时就需要用到slot作用域插槽

• 我们通过获取到slotProps属性
• 在通过slotProps.data就可以获取子组件传入到该slot的data了

<div id="app">
    <cpm></cpm>
    <cpm>
        <template slot-scope="slotProps">
            获取到了{{slotProps.data}}
        </template>
    </cpm>
</div>
<template id="cpm">
    <slot :data="msg">
        <h1>{{msg}}</h1>
    </slot>
</template>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        },
        components:{
            cpm:{
                template:'#cpm',
                data(){
                    return {
                        msg:"子组件传给slot的值"
                    }
                }
            }
        }
    })
</script>

模块间的导入导出（ES6 Modules）

模块

为了解决全局变量同名问题以及使用了匿名函数便无法被其他文件使用的问题，可以使用将需要暴露到外面的变量，使用一个模块作为出口。

在ES6 Modules中，我们使用export指令导出模块对外提供的接口，通过import命令来加载对应的这个模块

export

export指令用于导出变量，比如下面的代码

people.js

变量

export var name = '小明'
export var age = 18
export var flag = true

或者

var name = '小明'
var age = 18
var flag = true
export {
  name, age，flag
}

函数或类

export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}

或者

function mul(num1, num2) {
  return num1 * num2
}
class Person {
  run() {
    console.log('在奔跑');
  }
}

export{mul,Person}

default

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名,这时就可以用上default

export default function (argument) {
  console.log(argument);
}

值得注意的是 ，export default在同一个模块中，不允许同时存在多个

import

1. 首先，我们需要在HTML代码中引入两个 js 文件，并且类型需要设置为module

   一个是调用的模块js文件，一个是被调用的模块js文件

   <!-- 调用的模块js文件 -->
   <script src="main.js" type="module"></script>
   <!-- 被调用的模块js文件 -->
   <script src="people.js" type="module"></script>
   

2. import指令用于导入模块中的内容，比如调用的模块js文件main.js中的代码

   import {name,age,height} from "./people.js"
   
   console.log(name,age,height);
   

   有些时候一个一个获取不太方便，便可以采取以下写法

   import * as people from './people.js'
   
   console.log(people.name,people.age,people.height);
   

   如果获取的是default类型的到处内容

   import myDef from './people.js'
   //给default起个名字叫myDef，所以他现在为名字为myDef的函数
   myDef(123);