关于组件传值方法

1. 父传子
2. 子传父
3. eventbus
4. ref/$refs
5. $ parent/$children
6. $ attrs/$listeners
7. 依赖注入(provide/inject)
8. vuex

1. 父传子

父组件是通过props属性给子组件通信的

数据是单向流动 父—>子 （子组件中修改props数据，是无效的）

父组件内容

 <template>
   <div class="parent">
     <son :father="father"></son> 
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'Father',
   components:{son},
   data () {
     return {
       father: '我是父组件',
     }
   },
 }
 </script>

子组件内容

<template>
   <div class="son">
     <p>{{ father }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   props:['father'],
 }
</script>

2. 子传父

子组件

<template>
<div>
  <span>{{son}}</span>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
  export default {
    data () {
      return {
        son: '我是子组件的数据'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('getSon', this.son)
      }
    }
  }
</script>

父组件

<template>
   <span>{{name}}</span>
   <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
   <son @getSon="getSon"></son>
 </template>
<script>
  import son from './son'
  export default {
    components: {
      son
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      getSon(getSon) {
        // childValue就是子组件传过来的值
        this.name = getSon
      }
    }
  }
</script>

3. eventbus

main.js 初始化 EventBus

// main.js
Vue.prototype.$EventBus = new Vue()

新创建一个 .js 文件，比如 bus.js

import Vue from 'vue'
export const EventBus = new Vue()

调用
A页面

<template>
    <button @click="sendMsg()">发送</button>
</template>
 
<script> 
import { EventBus } from "../bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("Msg", '来自A页面的消息');
    }
  }
}; 
</script>

B页面

<script> 
import { 
  EventBus 
} from "../bus.js";
export default {
    mounted() {
    EventBus.$on("Msg", (msg) => {
      // A发送来的消息msg
    });
  }
};

4. ref/$refs

子组件

//子组件
 
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: '我是子组件'
    }
  },
  methods: {
    getMsg() {
      this.msg = '点我重新赋值'
    }
  }
}
</script>

父组件

//父组件
 
<template>
  <div @click="getData">
    <son ref="son"></children>
  </div>
</template>
<script>
import son from 'components/son.vue'
export default {
  components: { 
    son 
  },
  methods: {
    getData() {
      //返回一个对象
      this.$refs.son  
      //调用son的getMsg方法
      this.$refs.son.getMsg() 
    }
  }
}
</script>

5. $ parent/$children

父传子

注意：在钩子方法mounted中无法获取到父组件中的数据和方法
父组件

<template>
  <div>
    <h1>父组件</h1>
    <son></son>
  </div>
</template>
<script>
  // 引入子组件
  import son from './son'
  export default {
    name: 'Parent',
    components: {
      son
    },
    data () {
      return {
        msg: 'data from parent'
      }
    },
    methods: {
      fun () {
        console.log('parent fun')
      }
    }
  }
</script>

子组件

<template>
  <div>
    <h1>子组件</h1>
    <button @click="showParent">调用父组件的数据和方法</button>
  </div>
</template>
<script>
  export default {
    name: 'Child',
    methods: {
      showParent () {
        // 获取到所有的子组件
        console.log(this.$parent)
        // 获取指定子组件中的指定数据
        console.log(this.$parent.msg)
        // 调用子组件的方法
        this.$parent.fun()
      }
    }
  }
</script>

子传父

子组件

<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'son',
    data () {
      return {
        msg: 'msg from child'
      }
    },
    methods: {
      fun () {
        console.log('child fun')
      }
    }
  }
</script>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <son></son>
  </div>
</template>
<script>
  // 引入子组件
  import son from './son'
  export default {
    name: 'Parent',
    components: {
      son
    },
    mounted () {
      // 获取到所有的子组件，结果是一个数组
      console.log(this.$children)
      // 获取指定子组件中的指定数据
      console.log(this.$children[0].msg)
      // 调用子组件的方法
      this.$children[0].fun()
    }
  }
</script>

6. $ attrs/$listeners

可以看到无论是在Son组件中还是GrandSon组件中都可以拿到$attrs中的值。

子组件拿父组件，爷爷组件

$attrs:

//GrandFather.vue
<template>
  <div>
    <span>爷爷</span>
    <father :message="message" :age="age"></father>
  </div>
</template>
<script>
import father from "../father.vue";
export default {
components: {
    father,
  },
  data() {
    return {
      message: "我是爷爷组件",
      age: 24,
    };
  },
};
</script>

从孙子组件发送事件到父子组件中。

//GrandFather.vue
<template>
  <div >
    <span>爷爷</span>
    <Father @event="event"></Father>
  </div>
</template>
<script>
import Father from "../Father.vue";
export default {
  components: {
    Father,
  },
  methods: {
    event() {
      console.log("从Son组件发送过来的数据");
    },
  },
};
</script>

//Father.vue
<template>
  <div >
    <span>Father</span>
    <Son v-on="$listeners"></Son>
  </div>
</template>
<script>
import Son from "../Son.vue";
export default {
  components: {
    Son,
  },
};
</script>

//Son.vue
<template>
  <div >
    <span>儿子</span>
    <button @click="click">发送事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    click() {
      this.$emit("event");
    },
  },
};
</script>

7. 依赖注入(provide/inject)

provide和inject只能从父组件向孙组件传值，不能从孙组件向父组件传值

官网介绍

export default {
  name: "App",
  components: {
    Parent
  },
  data() {
    return {
      msg: '我是父组件',
      age: 12
    }
  },
  provide() {
    return {
    msg: this.msg,
    age: this.age,
  }
 }
}

子组件或者孙子…

export default {
  name: 'Son',
  components: {
    Son
  },
  inject: ['msg', 'age',]
  data() {
    return {
      sonMsg: this.msg
    }
  },
  created() {
    console.log(this.msg, this.age 'inject数据');
  }
}