Vue 구성 요소에 값을 전달하는 방법은 무엇입니까?

Vue 구성 요소 값 전송 방법: 1. props를 사용하여 부모에서 자식으로 값을 전송합니다. 2. "$emit"를 사용하여 자식에서 부모로 값을 전송합니다. 3. 형제에게 값을 전송하려면 EventBus를 사용합니다. 레벨 간 가치 전송을 위한 "제공/주입" 또는 "$attrs/$listeners" 방법.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, Dell G3 컴퓨터.

우리 모두는 Vue가 경량 프런트엔드 프레임워크이고 그 핵심이 컴포넌트 기반 개발이라는 것을 알고 있습니다. Vue는 컴포넌트로 하나씩 구성됩니다. 컴포넌트화는 Vue의 핵심이자 가장 강력한 기능 중 하나입니다. 구성 요소 인스턴스의 범위는 서로 독립적입니다. 즉, 서로 다른 구성 요소 간의 데이터가 서로 참조할 수 없습니다.

그러나 실제 프로젝트 개발 과정에서는 다른 컴포넌트의 데이터에 접근해야 하므로 컴포넌트 통신에 문제가 있습니다. Vue의 구성 요소 간의 관계는 아버지-아들, 형제 및 세대입니다. 다양한 관계에 대한 데이터 전송을 구현하는 방법은 다음에 설명하겠습니다.

1. 상위 컴포넌트는 하위 컴포넌트에 값을 전달합니다.

즉, 상위 컴포넌트는 속성을 통해 하위 컴포넌트에 값을 전달하고, 하위 컴포넌트는 props를 통해 값을 받습니다.

• 상위 구성 요소의 하위 구성 요소 태그에 사용자 정의 속성을 바인딩합니다.

• // 父组件
  <user-detail :myName="name" />
      
  export default {
      components: {
          UserDetail
      }
      ......
  }

• 이를 수신하려면 하위 구성 요소의 소품(배열 또는 개체일 수 있음)을 사용하세요. 여러 속성을 전달할 수 있습니다.

• // 子组件
  export default {
      props: ['myName']
  }
  
  /*
  props: { myName: String } //这样指定传入的类型，如果类型不对会警告
  props: { myName: [String, Number] } // 多个可能的类型
  prosp: { myName: { type: String, requires: true } } //必填的的字符串
  props: { 
      childMsg: { 
          type: Array, 
          default: () => [] 
      }
  }  // default指定默认值
  如果 props 验证失败，会在控制台发出一个警告。
  */

자식 컴포넌트가 받은 상위 컴포넌트의 값은 참조 유형과 공통 유형의 두 가지 유형으로 나뉩니다.

공통 유형: 문자열, 숫자, 부울, Null

참조 유형: Array, Object

vue의 단방향 데이터 흐름을 기반으로 즉, 구성 요소 간 데이터가 한 방향으로 흐르고, 하위 구성 요소는 상위 구성 요소가 전달한 값을 직접 수정하지 않습니다. 허용되므로 상위 구성 요소가 전달한 값을 직접 수정하는 작업은 피해야 합니다. 그렇지 않으면 콘솔에서 오류가 보고됩니다.

• 전달된 값이 단순 데이터 유형인 경우 하위 구성 요소에서 수정할 수 있으며 상위 구성 요소의 값을 호출하는 다른 형제 구성 요소에는 영향을 미치지 않습니다.

  구체적인 작업은 전달된 값을 먼저 데이터의 변수에 다시 할당한 다음 해당 변수를 변경하는 것입니다.

// 子组件
export default {
    props: ['myName'],
    data() {
        return {
            name : this.myName    // 把传过来的值赋值给新的变量
        }
    },
    watch: {
        myName(newVal) {
            this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
        }
    },
    methods: {
        changeName() {  
            this.name = 'Lily'  // 这里修改的只是自己内部的值，就不会报错了
        },
    }
}

• 참고: watch를 사용하여 상위 구성 요소가 전달한 myName 값을 모니터링하지 않으면 하위 구성 요소의 name 값이 상위 구성 요소의 myName 값으로 변경되지 않습니다. 데이터에서: 이 .myName은 초기 값을 정의합니다.

• 하위 구성 요소에서 참조 유형의 값이 수정되면 데이터가 공개되므로 상위 구성 요소도 수정되고 값을 참조하는 다른 하위 구성 요소도 이에 따라 수정됩니다. 상위 구성 요소가 하위 구성 요소에 전달한 값은 복사본을 만드는 것과 동일하다는 것을 이해할 수 있습니다. 이 복사본의 포인터는 여전히 상위 구성 요소의 포인터를 가리킵니다. 즉, 동일한 참조를 공유합니다. 따라서 특별한 요구사항이 없는 한 쉽게 수정하지 마세요.

2. 하위 구성 요소는 값을 상위 구성 요소에 전달합니다

1. 하위 구성 요소는 이벤트를 바인딩하고 this.$emit()를 통해 트리거합니다. 하위 구성 요소, 그리고 이 이벤트에 대한 함수를 정의합니다

// 子组件
<button>改变父组件的name</button>

export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

상위 구성 요소에서 handlerChange 이벤트를 정의하고 바인딩합니다

// 父组件
<child></child>

methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

2. 콜백 함수를 통해

먼저 상위 구성 요소에서 콜백 함수를 정의하고 콜백을 전달합니다.

// 父组件
<child></child>
methods: {
    callback: function(name) {        this.name = name
    }
}

하위 컴포넌트에서 콜백 함수를 수신하고 실행합니다

// 子组件
<button>改变父组件的name</button>
props: {
    callback: Function,
}

3. $parent / $children 또는 $refs

를 통해 컴포넌트 인스턴스에 액세스합니다. 둘 다 컴포넌트 인스턴스를 직접 가져오고 호출할 수 있습니다. 구성 요소 메서드를 사용하거나 데이터에 액세스한 직후입니다.

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}

// 父组件
<template>
  <child></child>
</template>

<script>
  export default {
    created () {
      // 通过 $ref 来访问子组件
      console.log(this.$refs.childRef.title);  // 子组件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通过 $children 来调用子组件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>

참고: 이러한 방식의 구성요소 통신은 레벨을 넘을 수 없습니다.

4. $attrs / $listeners 자세한 내용을 보려면 여기를 클릭하세요

三、兄弟组件之间传值

1、还是通过 $emit 和 props 结合的方式

在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件

// 父组件
<child-a></child-a>
<child-b></child-b>  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子组件B中接收变量和绑定触发事件

// child-b 组件
<p>姓名：{{ myName }}</p>
<button>修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit(&#39;changeName&#39;, &#39;Lily&#39;)   // 触发事件并传值
        }
    }
}
</script>

// child-a 组件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判断是否有值传过来
                return this.myName
            }
            return &#39;John&#39; //没有传值的默认值
        }
    }
}
</script>

即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。

2. 通过一个空 vue 实例

创建一个 EventBus.js 文件，并暴露一个 vue 实例

import Vue from 'Vue'export default new Vue()

在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数

(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)

<template>
    <div>
        <p>姓名: {{ name }}</p>
        <button>修改姓名</button>
    </div>
</template>

<script>
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: &#39;John&#39;,
     }
  },
  methods: {
      changeName() {
          this.name = &#39;Lily&#39;
          EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
      }
    }
}
</script>

在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

3. 使用 vuex →点这里

四、多层父子组件通信

有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。

这时就需要用到 vue 提供的更高阶的方法：provide/inject。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。查 看 官 网

provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。

父组件：

export default {
  provide: { // 它的作用就是将 **name** 这个变量提供给它的所有子组件。
    name: 'Jack'
  }
}

子组件：

export default {
  inject: ['name'], // 注入了从父组件中提供的name变量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。

如果想要实现 provide 和 inject 数据响应，有两种方法：

• provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在后代组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods

// 父组件　
<div>
      <button>修改姓名</button>
      <child-b></child-b>
</div>
<script>
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //提供祖先组件的实例
        };
    },
    methods: {
        changeName() {
            this.name = &#39;Lily&#39;
        }
    }
</script>

后代组件中取值：　　

<template>
　　<div>
　　　　<p>姓名：{{parentObj.name}}</p>
　　</div>
</template>
<script>
　　export default {
　　　　inject: {
　　　　　　parentObj: {
　　　　　　　　default: () => ({})
　　　　　　}
　　　　} // 或者inject: [&#39;parentObj&#39;]
　　};
</script>

注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。

• 使用 Vue.observable 优化响应式 provide，这个我用的不熟就不说了，可以 → 官方文档

 总结

• 父子通信：父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；

• 兄弟通信： EventBus；Vuex；

• 跨级通信： EventBus；Vuex；provide / inject ；$attrs / $listeners；

相关推荐：《vue.js教程》

위 내용은 Vue 구성 요소에 값을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!