Vue에서 값을 전달하는 방법은 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법 소개(3가지 유형)-JS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-23 16:46:17

원래의

3800명이 탐색했습니다.

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

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

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

로그인 후 복사

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

 Vue,component(&#39;child&#39;,{
     props:[&#39;message&#39;]
 })

로그인 후 복사

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

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

로그인 후 복사

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

Vue.component(&#39;parent&#39;, {
    data() {
        return {
            msg: &#39;我是子组件&#39;
        }
    },
    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(&#39;test&#39;,&#39;数据&#39;)

로그인 후 복사

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

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

로그인 후 복사