1. es6的导入导出

类型

1. 默认导出：

export default只能导出一个对象不需要加上{} 导入的名字可以自定义

/* 可以导出多个 */

/* 第一种方式 */
// export let a = '我爱js'

// export const obj = {
//     name:'李四'
// }

// export function fn(){
//     console.log('fn')
// }

/* 第二种方式 */
let a = '我爱js'

const obj = {
    name:'李四'
}

function fn(){
    console.log('fn')
}

/* 这种导出 {} 只是一种格式 并不是导出一个对象
里面的写法也不是 es6的简写的方式 仅仅代表一种导出的格式*/

/* 导入和导出的顺序可以不一致 但是命名必须保持一致 */
export { obj,fn,a }

复制代码
复制代码

命名式导入导出

命名式导出必须要let 或者 const 或者 var 一个变量，可以定义一个变量 export 导出一个，也可以先定义多个变量，在export {} 的格式同时导出，注意：这种导出 {} 只是一种格式并不是导出一个对象，里面的写法也不是 es6的简写的方式仅仅代表一种导出的格式。\

命名式导入必须要使用 {} 里面的变量名字必须保持一致，导入和导出的顺序可以不一致。
在导入导出时使用 as 变量名可以修改变量名，注意：使用时须使用修改后的变量名。导出多个变量后，在导入时使用 * as 变量名获得的是一个模块化对象。

export 和 export default 区别：export可以导出多个变量导出的变量必须要导入的保持一致还需要加上{}； export default只能导出一个对象不需要加上{} 导入的名字可以自定义。

import {a,obj,fn} from './2.js'
console.log(a)
console.log(obj)
fn()
复制代码
复制代码

    /* 使用  * as 变量名 导入多个变量*/
    /* 在导入2.js的时候 2.js的内容就会执行一遍 */
    import * as all from './2.js'
    /* 导入同一个js多次，只会执行一遍 */
    // import * as all2 from './2.js'
    // import * as all3 from './2.js'

    /* all 是一个模块化对象 */
    console.log( all.a )
    console.log( all.obj )
    all.fn()      
</script>

复制代码
复制代码

2. 脚手架的组件传值方法

1. 父传子

通过bind(:)添加属性的方式传值，使用Props：[ ]接收

2. 子改夫

通过点击事件触发this.$emit('自定义事件'，可携带的参数)方法绑定的事件，在父组件的环境下给子组件绑定其emite发送的事件，后触发其父环境下的方法 => 改变父组件的数据从而刷新视图。

3. this.$children

子组件通过 $parent 可以获取父组件的属性与方法，create 生命周期即可获取。

// 子组件
<span>父组件没有传的str：{{$parent.str}}</span>&nbsp;
<button @click="changeStr">点击改变父组件的str</button>

methods:{
        changeStr(){
            this.$parent.changeStr()
        }
    }
    
// 父组件
methods:{
    changeStr(){
      this.str = '子组件通过$parent改变后的str'
    }
  }

复制代码
复制代码

相同：其都为属性，都可以获得父/子的属性和方法。

不同：children 返回的格式：【{}】，parent:{}

4. this.$parent

父组件通过 $children 可以获取子组件的属性与方法，mounted 生命周期可获取，使用子组件方法时可能会因缓存而导致不会刷新视图，推荐通过事件使用子组件方法。

// 父组件
<h1>
      <span>通过$children获取的子组件的message：{{message}}</span>&nbsp;
      <button @click="changeMessage">点击改变子组件的message</button>
    </h1>

mounted(){
    console.log(this._provided);
    this.message = this.$children[0].message
  },
methods:{
    changeMessage(){
      this.$children[0].changeMessage();
      this.message = this.$children[0].message;
    }
  }
  
// 子组件
methods:{
        changeMessage(){
            this.message = '父组件通过$children改变后的message'
        }
    }

复制代码
复制代码

4.爷跨子传孙

爷孙组件之间传值 provide 与 inject**

爷爷级的组件使用 provide 属性即可直接向孙级的组件传值。

▲ ：当传递的值为活值时（如：变量/后台返回的数据），provide的值为一个函数，通过函数return对象

// 传一个固定值
provide:{
      fixedValue:'父组件的固定值fixedValue',
}

// 传动态值
provide(){
    return {
      dynamicValue: this.msg,
    }
  },
  
// 传接口数据
provide(){
    return {
      // 通过箭头函数返回值
      interfaceData:()=>this.jieKouShuJu
    }
  },
复制代码
复制代码
复制代码

孙级的组件通过 inject 属性来接收值。

<template>
  <div>
      <hr>
      <h1>
          <span>父组件传给孙组件的固定值：{{fixedValue}}</span>
          <br>
          <span>父组件传给孙组件的动态值msg：{{dynamicValue}}</span>
          <br>
          <span v-cloak>父组件传给孙组件的模拟接口数据：{{interfaceData()}}</span>
      </h1>
      <hr>
  </div>
</template>

<script>
export default {
    name:'GrandSon',
    inject:['fixedValue','dynamicValue','interfaceData'],
    created(){
        console.log(this);
    },
    methods:{
        change(){
            this.dynamicValue = this.$parent.$parent.msg
        }
    }
}
</script>

<style>
    [v-cloak]{
        display: none;
    }
</style>
复制代码

5.同辈互传（无限制互传）

本质：通过vue原型修改值

在Vue原型上添加一个属性其值为vue实例对象。

传送者通过这个属性为vue实例发送自定义事件，接收者通过其监听事件触发执行方法改变值。

/* 事件总线的方式 */
/* 在构造函数Vue的原型身上添加一个$bus属性
属性的值是Vue的实例化对象 */
/* 事件总线传值不局限于兄弟组件传值
总的特征 先监听自定义事件 再发送自定义事件 */
/* 频繁使用 会显得浪费性能 */
Vue.prototype.$bus = new Vue();
复制代码

// 发送者
<template>
<div>
  <h1 @click="getson">{{toson}}</h1>
  <h1 >b:{{bmsg}}</h1>
  <button @click="fasong">点我发送</button>
</div>
</template>
\
<script>
export default {
    data(){
        return{bmsg:'有难同当',bmsg2:'你是我永远的兄弟',fromfu:""}
    },
    methods:{
        getson(){
            this.$emit('update:toson','自改父')
        },
        fasong(){
            // 给vue实例发送了一个事件（点击时已经生效了）
            this.$bus.$emit('huhuan',this.bmsg2)
        }
    },
    props:['toson']
}
</script>
<style>
</style>
复制代码

// 接收者
<template>
<div>
  <h1>a:{{amsg}}</h1>
  <p>B发送过来的话=>{{xdmsg}}</p>
</div>
</template>
<script>
export default {
    data(){
        return{amsg:'有福同享',xdmsg:""}
    },
    creazed(){
      // 在vue实例上监听发送的事件
      this.$bus.$on('huhuan',(v)=>{
        this.xdmsg=v
      })
    }
}
</script>
<style>
</style>
复制代码

3. ref

ref 可监听dom元素和其值
this.$nextTick ( ( ) => { } ) 可获取在数据修改后data重新加载的值

methods:{
    getTitle(){
      this.title = '呜呜呜'
      // 数据下一次刷新
      this.$nextTick(()=>{
        console.log(this.$refs.title.innerHTML);
      })
    }
  }