Vue组件的传值

es6导入导出

在html页面通过 script 标签导入，script 标签需要加上属性 type="module" 。
默认导入导出方式
js 文件默认到处方式，使用 export default 导出一个对象 ，使用 import obj from './1.js'，其中 obj 是变量名，可任意取，from 后面的是 导入的js文件路径。

/* 默认导出 */
export default {
    name:'张三'
}

<script type="module">
        /* 默认导入 名字可以任意取*/
        import obj from './1.js'
        console.log(obj)
</script>
复制代码

命名式导入导出
命名式导出必须要let 或者 const 或者 var 一个变量，可以定义一个变量 export 导出一个，也可以先定义多个变量，在export {} 的格式同时导出，注意：这种导出 {} 只是一种格式 并不是导出一个对象，里面的写法也不是 es6的简写的方式 仅仅代表一种导出的格式。
命名式导入必须要使用 {} 里面的变量名字必须保持一致，导入和导出的顺序可以不一致。
在导入导出时使用 as 变量名可以修改变量名，注意：使用时须使用修改后的变量名。 导出多个变量后，在导入时使用 * as 变量名获得的是一个模块化对象。 export 和 export default 区别：export可以导出多个变量 导出的变量必须要导入的保持一致还需要加上{}； export default只能导出一个对象 不需要加上{} 导入的名字可以自定义。

/* 命名式导入导出 必须要let 或者 const 或者 var 一个变量 */
/* 可以导出多个 */

/* 第一种方式 */
// 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 }
复制代码

/* 命名式导入必须要使用 {} 里面的变量名字必须保持一致 */
import {a,obj,fn} from './2.js'
console.log(a)
console.log(obj)
fn()
复制代码

<script type="module">
    /* 使用  * 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>
复制代码

脚手架父子组件之间传值与子改父

1、props属性与$emit()方法

子组件的props属性可以接收父组件传过来的数据，子组件本身绑定事件触发$emit()方法发送一个自定义事件名称以及一个或多个参数，父组件使用子组件时在子组件标签上绑定子组件的自定义事件，指向父组件中定义的事件改变父组件的数据从而刷新视图。

2、parent与parent与parent与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 可以获取子组件的属性与方法，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'
        }
    }
复制代码

3、爷孙组件之间传值provide与inject 爷爷级的组件使用 provide 属性即可直接向孙级的组件传值。

// 传一个固定值
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>