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

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

不言
不言원래의
2018-08-23 16:46:173762검색

이 기사에서 제공하는 내용은 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")
 })

관련 권장 사항:

Vue 구성 요소 전송 방법

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.