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

1.父传子和自改夫

1.1 父传子：

通过绑定属性的方式为子组件传递值；子组件通过Props接收属性。

//父组件
<template>
  <div id="app">
    //绑定属性的方式传值
    <children :shebei="gameer" @changeshebei="changeshebei">
    </children>
  </div>
</template>

//子组件接收的两种方法
 // props:['shebei']
  props:{
    shebei:{
    // 接收属性值的类型
      type:Array,
      // 没有接受成功的情况下的默认值：必须以函数的方式Return；类型必须一致
      default(){
        return []
      },
    }

1.2 子改父：

需要进行子改父的dom下为其添加自定义事件；通常在click触发时下嵌套一个自定义事件， 此事件的执行方法设置在父组件中,因此你可以操作父组件的数据。

// 子组件
 methods:{
    click(x,pinpai){
      // 在点击事件的基础上添加了自定义事件。
      this.$emit('changeshebei',x,pinpai)
    },
  }

<template>
  <div id="app">
    <!-- 在父组件环境内，为子组件的自定义事件设定方法。 -->
    <children :shebei="gameer" @changeshebei="changeshebei">
    </children>
  </div>
</template>

<script>
methods:{
    changeshebei(x,leishe){
      this.gameer[x].pinpai.name=leishe
    },
  }
</script>

1.3 子改夫的糖裹写法

父组件给子组件传值时添加 .sync 修饰符，如<ChildA ref="childa" :message.sync="message"/>
子组件使用 this.$emit('update:属性',value)，

如 change(){ this.$emit('update:message','通过.sync语法糖改变后的父组件的message') }

// 修饰符.sync
<child-b :toson.sync="toson"/>
// #父
<template>
  <div>
    <h1 @click='getson'>b:{{bmsg}}</h1>
  </div>
</template>

// #子
<script>
export default{
    data(){
        return{bmsg:'有难同当',bmsg2:'你是我永远的兄弟',fromfu:""}
    },
    methods:{
        getson(){
            //  this.$emit('update:接受的参数','新值')
            this.$emit('update:toson','自改父')
        }
    }
}

</script>
<style>
</style>

3. this.$children

父组件通过 $children 可以获取子组件的属性与方法。

this.$parent同理

注意：
$children返回的格式为：【{}】

$parent返回的格式为：{}

子组件取到父子件的修改自身的方法，修改其值。

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

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

复制代码

4.父向后代

provide 与 inject

父组件使用 provide 属性即可直接向后代组件传值，当传递的值为活值时（如：变量/后台返回的数据），其provide传递的属性应通过函数return对象的方式。

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

// 传动态值
provide(){
    return {
      dynamicValue: this.msg,
      // 当data中的数据为异步获取时，传值采用箭头函数的方式。
      apimsg:()=>this.apimsg
    }
  },

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

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

5.（无限制互传）

本质：通过vue实例修改值

在Vue原型上添加$bus属性其值为Vue实例

传送者通过$bus.$emit('change',msg)为vue实例发送自定义事件，接收者通过this.$bus.$on('change',(msg)=>{})其监听事件触发时采用的回调函数。

...频繁使用会浪费性能奥

# main.js

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:{
        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:""}
    },
    created(){
      // 在vue实例上监听发送的事件
      this.$bus.$on('huhuan',(v)=>{
        this.xdmsg=v
      })
    }
}
</script>
<style>
</style>

Vue脚手架之组件传值