vue 组件之间的传值

Posted 2020-11-29 toughy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件之间的传值相关的知识，希望对你有一定的参考价值。

组件之间的传值有三种 1，父组件给子组件传值 , 2，子组件给父组件传值 3, 非父子组件之间的传值（又叫兄弟组件传值）

1。父组件给子组件传值 (父组件给子组件传值需要通过props)

首先我的页面结构是这样的 child是子组件 father是父组件，

在这里我新建一个父组件 father.vue

<template>
  <div>
    <div>这是父组件</div>
    <!-- 使用组件child -->
    <child :name-list=‘names‘></child>  
  </div>
</template>
<script>
import child from ‘./components/child.vue‘// 引入子组件child
export default {
  components:{
    child //注册组件 
  },
  data(){
    return{
      names:[]
    }
  },
  mounted(){
    // 请求数据
    this.$axios.get(‘https://www.daxunxun.com/douban‘).then(res=>{
      console.log(res.data);
      this.names=res.data
    });
  },
}
</script>

然后子组件中 child.vue

<template>
  <div>
    <ul>
      <li v-for=‘(item,index) in nameList‘ :key=‘index‘>{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{}
  },
  // 第一种
  // props:[‘nameList‘],也可以直接这样写

  // 第二种
  // props: {
  //   nameList: Array/String/Obj
  // },

  // 第三种
  // props: {
  //   nameList: { // 自定义的属性
  //     type: Array/Object, // 数据类型为数组或者对象
  //     default: function () { // 默认值必须为函数，但是返回数组或对象
  //       return [1,2,3]/{}
  //     }
  //   }
  // },

  // 我使用的是第三种
  props: {
    nameList: { // 自定义的属性
      type: Array, // 数据类型为数组或者对象
      default: function () { // 默认值必须为函数，但是返回数组或对象
        return []
      }
    }
  },
}
</script>

这样就完成的父组件给子组件的传值。

总结：

　　1。新建子组件和父组件，在父组件中引入子组件

　　2. 在调用child的地方在child身上添加一个自定义的属性 name-list 这个属性名可以随便取尽量语义化 names就是你要传递的值因为names是个变量所以要结合绑定属性：

　　3.在定义子组件的js中添加一个props选项根据你传递的数据类型定义props 在这以下有三种参考　

// 第一种

// props:[‘nameList‘],也可以直接这样写

// 第二种

// props: {

// nameList: Array/String/Obj

// },

// 第三种

// props: {

// nameList: { // 自定义的属性

// type: Array/Object, // 数据类型为数组或者对象

// default: function () { // 默认值必须为函数，但是返回数组或对象

// return [1,2,3]/{}

// }

// },

这样就完成了一个简单的父给子传的值。

注意：注册子组件的时候路径引入正确，

2.子组件給父组件传值 (通过自定义事件传值）

father.vue 添加一个自定义事件

<template>
  <div>
    <div>这是父组件</div>
    <!-- 使用组件child -->
    <!-- @to-Father  自定义的事件 -->
    <child @to-Father="getData"></child>  
  </div>
</template>
<script>
import child from ‘./components/child.vue‘// 引入子组件child
export default {
  components:{
    child //注册组件 
  },
  data(){
    return{
    }
  },
  methods:{
    getData(data){
      console.log(data,‘data为子组件传过来的值‘)
    }
  }
}
</script>

在子组件child.vue

<template>
  <div>
    <button @click="toFather">我是子组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return{}
  },
  methods:{
    toFather() {
      // 通过$emit  this.$emit(‘父组件自定义绑定的事件‘， 子组件传给父组件的值)
      this.$emit(‘to-Father‘,‘子组件传给父组件的值‘)
    }
  }
}
</script>

总结：

　　1.子组件给父组件传值主要通过自定义事件

　　2.在定义子组件的地方去执行this.$emit(‘to-Father‘,‘子组件传给父组件的值‘)

3.非父子组件传值/兄弟组件传值利用中央事件总线传值 const bus = new Vue()

结构：

：技术图片

首先我们需要利用中央事件总线传值 const bus = new Vue()，

在main.js中，new一个空的vue挂在到vue原型上：

Vue.prototype.$bus = new Vue();这样两者才可以进行通讯

下面我们让哥哥two组件给兄弟one组件传递一个数据 one.vue

this.$bus.$emit(‘to-two‘, ‘您好兄弟two‘)

one组件传值 bus.$emit(‘事件名称1‘, ‘传递数据‘)

<template>
  <div>
    <button @click="toTwo">我是哥哥one组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return{
    }
  },
  // 开始传递给two组件
  methods:{
    toTwo(){
      console.log(‘1111111111‘)
      this.$bus.$emit(‘to-two‘, ‘您好兄弟two‘)
    }
  }
}
</script>

two组件接受数据 two.vue data即为one组建传递过来的数据

<template>
  <div>
    <button>我是弟弟two组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return{
    }
  },
  mounted () {
    this.$bus.$on(‘to-two‘, function (data) {
      console.log(data,‘data哥哥two组件传过来的数据‘)
    })
  },
}
</script>