Vue에서 값을 전달하는 방법은 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법 소개(3가지 유형)

이 기사에서 제공하는 내용은 Vue의 가치 전송 방법이 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법(3가지 유형)에 대한 소개에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 상위 구성 요소는 하위 구성 요소에 값을 전달합니다.
1. props를 사용하여 데이터 채널을 설정합니다

       // 这是父组件 
      <div id="app">
          // 这是子组件 
          <child message="hello" ></child>
      </div>

2. 하위 컴포넌트의 props를 통해 전달되는 데이터

 Vue,component('child',{
     props:['message']
 })

2. 하위 컴포넌트는 상위 컴포넌트에 값을 전달합니다
1. 하위 구성 요소 맞춤 이벤트

Vue.component('child',{
    methods:{
        handleClick(){
        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数
            this.$emit('parentClick',123)
        }
    },
    template:`        <div>
            <h1>这是子组件</h1>
            <button @click="handleClick" >
                发送给父组件            </button>
        </div>
    `
})

2. 상위 구성 요소의 하위 태그는 맞춤 이벤트를 수신하고 전달된 값을 가져옵니다

Vue.component('parent', {
    data() {
        return {
            msg: '我是子组件'
        }
    },
    methods: {
        receiveMsg(value) {
            console.log(value)
            this.msg = value
        }
    },
    template:&#39;        <div>
            <h1>这是子组件</h1>
            <p>接收子组件传过来的值{{msg}}</p>
            <child @parentClick=&#39;receiveMsg&#39;></child>
        </div>
    &#39;
})

3. 부모-자식 구성 요소가 아닌 구성 요소는 값을 전달합니다.
때로는 두 구성 요소도 전달해야 합니다. 값(부모-자식 관계))을 전달하고 값을 가져오려면 공개 vue가 필요합니다. ​​
1. 빈 vue를 만듭니다

  // 创建一个空的公共的vue对象
    var bus = new Vue();

2. 구성 요소 1에서 $emit을 정의하여 데이터를 보냅니다.

3. 전달된 데이터를 받으려면 구성요소 2 $on에서 사용하세요

bus.$emit('test','数据')

물론, 값을 전송하고 얻기 위해 로컬 스토리지를 사용할 수도 있습니다.

bus.$on('test', function(num) {
     this.msg= num;       //事件的解绑问题 
        bus.$off("test")
 })

관련 권장 사항:

Vue 구성 요소 전송 방법

vue는 어떻게 현재 클릭된 요소를 가져오고 값을 전달합니까?

위 내용은 Vue에서 값을 전달하는 방법은 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법 소개(3가지 유형)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!