vue组件传值的十种方式

ゝ一纸荒年。 2022-10-16 00:54 162阅读 0赞

## vue组件传值的十种方式 ##

### 一、props ###

***父传子***

*  子组件

// 第一种数组方式
    props: [xxx, xxx, xxx]
    // 第二种对象方式
    props: { xxx: Number, xxx: String}
    // 第三种对象嵌套对象方式
    //第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用
    props: {
        xxx: {
            //类型不匹配会警告
            type: Number,
            default: 0,
            required: true,
            // 返回值不是 true,会警告
            validator(val) { return val === 10}
        }
    }

*  父组件

// 第一种静态属性传参
    // 注意：
    	// 1.在不定义 props 类型的情况下 props 接受到的均为 String。
    	// 2.当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true
    	
    
    <children xxx="123"></children>
    
    
    <children xxx></children>

// 第二种动态属性传参
    
    // 注意：
    	// 1.需要区分非简写形式传入的值是对象，则会对应 props 中多个值
    	// 2.会保留传入值的类型
    	// 3.如果是表达式则获取到的是表达式的计算结果
    
    <children :xxx="123"></children>
    
    
    <children v-bind:xxx="[1, 2, 3]"></children>
    
    
    <children v-bind="{xxx1: 1, xxx2: 2}"></children>

### 二、$emit-- $on ###

***子传父***

*  子组件

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

*  父组件

<template>
      <div>
        父组件:
        <span>{
       {name}}</span>
        <br>
        <br>
        
        <child  
        	:third="third"
            @materials="getMaterials">
       </child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          getMaterials(evidence) {
            // childValue就是子组件传过来的值
            this.name = evidence
          }
        }
      }
    </script>

### 三、公共仓库bus.js ###

> 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果

*  公共bus.js

//bus.js
    import Vue from 'vue'
    export default new Vue()

*  组件A（传值的页面）

<template>
      <div>
        A组件:
        <span>{
       {elementValue}}</span>
        <input type="button" value="点击触发" @click="elementByValue">
      </div>
    </template>
    <script>
      // 引入公共的bug，来做为中间传达的工具
      import Bus from './bus.js'
      export default {
        data () {
          return {
            elementValue: 4
          }
        },
        methods: {
          elementByValue () {
            Bus.$emit('val', this.elementValue)
          }
        }
      }
    </script>

*  组件B （接收值的页面）

<template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{
       {name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted () {
          // 用$on事件来接收参数
          Bus.$on('val', elementValue => {
            console.log(elementValue)
            vm.name = elementValue
          })
        },
        methods: {
          getData () {
            this.name++
          }
        }
      }
    </script>

### 四、vuex ###

### 五、v-model ###

*  父组件

// 引入子组件
    // 写法 1
    <plaintiff    v-model="activeName_copy"></plaintiff >
    
    // 写法 2
    <plaintiff  :activeName_copy="activeName_copy" @update:activeName_copy="activeName_copy= $event"></plaintiff>
    
    // 写法 3 
    // 1. 事件名必须是 update: + 属性名
    // 2. 参数不能是表达式，最好是 data 里面的属性
    <plaintiff    :activeName_copy.sync="activeName_copy"></plaintiff>
    
    data(){
    	return{
    		activeName_copy: "first",
    	}
    }

*  子组件

props: ['activeName_copy],
    data(){
    	return{
    		activeName: this.activeName_copy,
    	}
    }
    methods:{
    	aa(){
    			this.activeName = 'fifth'
    	        this.$emit('update:activeName_copy', this.activeName) //触发 input 事件，并传入新值
    	}
    }

### 六、project / inject ###

{
        project() {
            return {
                parent: this.test
            }
        },
        data(){
          return{
              test:true
          }
      }
    }
    
    {
        // 写法一
        inject: ['parent']
        // 写法二
        inject: { parent: 'parent' }
        // 写法三
        inject: {
            parent: {
                from: 'parent',
                default: 222
            }
        }
    }

### 七、$refs和ref ###

### 八、$root ###

### 九、 $parent 和 $children （但是在实际中 $parent用的非常少——考虑到耦合度的原因） ###

> $root 获取根组件  
> $parent 获取父组件—父传子  
> $children 获取子组件(所有的子组件，不保证顺序)-----子传父  
> $refs 组件获取组件实例，元素获取元素

### 十、插槽 ###

### 十一、$attrs 和 $listeners ###