vue2 组件传参小结

1.父组件向子组件传参：自定义属性,props

例子：在页面中，子组件需要拿到父组件里面的数据使用

父组件代码

```父组件```
<template>
  <div>
    <!-- 这是父组件 -->
    <h1>我是父组件</h1>
    <br/>
    <div>
      <!-- 使用子组件 -->
      <child :message="message" :num="4"></child>
    </div>
  </div>
</template>

<script>
// 引入子组件
import child from './child.vue'
export default {
  // 注册子组件
  components: { child },
  comments: {
    child
  },
  data () {
    return {
      message: '我是父组件的数据'
    }
  },
  methods: {},
  mounted () {}
}
</script>

<style lang="scss" scoped>

</style>

子组件代码

```子组件代码```
<template>
  <div>
    <!-- 这是子组件 -->
    <h1>我是子组件</h1>
    <div>子组件中父组件传过来的数据message: {{ message }}; num: {{ num }}</div>
  </div>
</template>

<script>
export default {
  // props接收父组件传递的参数
  props: {
    message: {
      type: String,
      default: ''
    },
    num: {
      type: Number || String,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped></style>

 效果图

2.父组件向子组件传参：refs

例子：例如列表的新增页面有很多的tab页，每个页面都有提交和保存的按钮，这个时候我通常将这些固定按钮写在父组件，具体页面内容以子组件的形式引入，但是按钮提交前会对页面内容进行校验，在这种情况下，通常由父组件调用子组件的校验规则来进行校验，this.$refs可以获取子组件的实例，调用子组件的方法

通过给引入的子组件添加ref属性，通过this.refs.children可以获取子组件的实例，调用子组件的方法，将需要传递的参数在方法里面传过去，子组件接收就可以了，通过触发某个事件进行传参

父组件

<template>
  <div>
    <!-- 这是父组件 -->
    <h1>我是父组件</h1>
    <h2>childData:{{ childData }}</h2>
    <el-button type="primary" @click="handdleClick">按钮</el-button>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div>
      <!-- 使用子组件 -->
      <child :message="message" :num="4" ref="children"></child>
    </div>
  </div>
</template>

<script>

// 引入子组件
import child from './child.vue'
export default {
  // 注册子组件
  components: { child },
  comments: {
    child
  },
  data () {
    return {
      message: '我是父组件的数据',
      editQuery: {
        str: '数据1',
        boll: true
      },
      childData: 0
    }
  },
  methods: {
    // 通过给引入的子组件添加ref属性，通过this.refs.children可以获取子组件的实例，调用子组件的方法，将需要传递的参数在方法里面传过去，子组件接收就可以了，通过触发某个事件进行传参
    handdleClick () {
      // 不需要拿到子组件的返回值
      this.$refs.children.getValue(this.editQuery)
      // 需要拿到子组件的返回值在处理
      const childData = this.$refs.children.getValue(this.editQuery)
      this.childData = childData
    }
  },
  mounted () {}
}
</script>

<style lang="scss" scoped>

</style>

子组件

<template>
  <div>
    <!-- 这是子组件 -->
    <h1>我是子组件</h1>
    <div>子组件中父组件传过来的数据message: {{ message }}; num: {{ num }}</div>
    <br/>
    <div>
      我是父组件通过refs传过来的数据:str:{{ query.str }}; Boll: {{ query.boll }}
    </div>
  </div>
</template>

<script>
export default {
  // props接收父组件传递的参数
  props: {
    message: {
      type: String,
      default: ''
    },
    num: {
      type: Number || String,
      default: 0
    }
  },
  data () {
    return {
      query: {
        str: '',
        boll: false
      }
    }
  },
  methods: {
    // 父组件调用的子组件的方法，val为父组件传递的参数，方法可以有返回值，父组件可以接收返回值，例如return 1，父组件则可以接收到返回值为1
    getValue (val) {
      this.query = val
      return 1
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

3.父组件像子组件传参：$children，$parent

当需要拿到所有子组件的时候才会通过this.$children，返回的是一个存放所有子组件的数组，很少用到

this.$parent获取当前组件的父组件,很少用到就不举例子了

4.子组件向父组件传参： 自定义事件，emit

当一个页面中，子组件的数据改变了，需要吧这个数据同步到父组件中使用，可以使用自定义事件与this.$emit来实现，例子：假设一个页面有两块组成，父组件和子组件，父组件为具体内容，可以修改，子组件为审批的流程组件，当我们修改了父组件中的数据，想通过审批页面的按钮来保存的时候，通常就会用到this.$emit,点击子组件中的审批按钮，在其方法里面调用this.$emit的方法来调用父组件的数据需改的方法。

父组件

<template>
  <div>
    <!-- 这是父组件 -->
    <h1>我是父组件</h1>
    <h2>childData:{{ childData }}</h2>
    <el-button type="primary" @click="handdleClick">按钮</el-button>
    <div>子组件传递过来的数据 {{ arr }}</div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div>
      <!-- 使用子组件 -->
      <!-- getData为自定义事件 -->
      <child :message="message" :num="4" ref="children" @getData="getData"></child>
    </div>
  </div>
</template>

<script>

// 引入子组件
import child from './child.vue'
export default {
  // 注册子组件
  components: { child },
  comments: {
    child
  },
  data () {
    return {
      message: '我是父组件的数据',
      editQuery: {
        str: '数据1',
        boll: true
      },
      childData: 0,
      arr: []
    }
  },
  methods: {
    // 通过给引入的子组件添加ref属性，通过this.refs.children可以获取子组件的实例，调用子组件的方法，将需要传递的参数在方法里面传过去，子组件接收就可以了，通过触发某个事件进行传参
    handdleClick () {
      // 不需要拿到子组件的返回值
      this.$refs.children.getValue(this.editQuery)
      // 需要拿到子组件的返回值在处理
      const childData = this.$refs.children.getValue(this.editQuery)
      this.childData = childData
    },
    // 子组件调用父组件的自定义方法
    getData (val) {
      this.arr = val
    }
  },
  mounted () {}
}
</script>

<style lang="scss" scoped>

</style>

子组件

<template>
  <div>
    <!-- 这是子组件 -->
    <h1>我是子组件</h1>
    <div>子组件中父组件传过来的数据message: {{ message }}; num: {{ num }}</div>
    <br/>
    <div>
      我是父组件通过refs传过来的数据:str:{{ query.str }}; Boll: {{ query.boll }}
    </div>
    <br/>
    <el-button @click="approve">审批按钮</el-button>
  </div>
</template>

<script>
export default {
  // props接收父组件传递的参数
  props: {
    message: {
      type: String,
      default: ''
    },
    num: {
      type: Number || String,
      default: 0
    }
  },
  data () {
    return {
      query: {
        str: '',
        boll: false
      },
      strData: [1, 2, 3]
    }
  },
  methods: {
    // 父组件调用的子组件的方法，val为父组件传递的参数，方法可以有返回值，父组件可以接收返回值，例如return 1，父组件则可以接收到返回值为1
    getValue (val) {
      this.query = val
      return 1
    },
    // 审批
    approve () {
      // 调用父组件的自定义方法，第二个参数为传递的参数
      this.$emit('getData', this.strData)
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

 

5.事件中心总线：eventBus（不考虑组件层级）

1.定义
import Vue from 'vue'
 
// main.js 中
 
// 第一种定义方式
Vue.prototype.$eventBus = new Vue()
 
 
// 第二种定义方式
window.eventBus = new Vue();


2.触发事件
//使用方式一定义时
// params 多个参数
this.$eventBus.$emit('eventName', param1,param2,...)
 
 
//使用方式二定义时
eventBus.$emit('eventName', param1,param2,...)


3.监听事件

//使用方式一定义时
this.$eventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行 逻辑代码
    // params 多个参数
})
 
 
//使用方式二定义时
eventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行 逻辑代码
})


4.移除事件
//使用方式一定义时
this.$eventBus.$off('eventName');
 
//使用方式二定义时
eventBus.$off('eventName');