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

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

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

2、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>