vuejs에서 부모-자식 통신을 설정하는 방법

vuejs에서 상위-하위 통신을 설정하는 방법: 1. 상위 구성 요소는 props를 사용하여 하위 구성 요소에 데이터를 전달합니다. 2. 하위 구성 요소는 "$emit"를 통해 상위 구성 요소에 메시지를 보냅니다. sync" 구문 설탕; 4. " $attrs" 및 "$listeners"를 사용하십시오. 5. private을 사용하고 주입하십시오.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue에는 상위 구성 요소와 하위 구성 요소 간에 다음과 같은 통신 방법이 있습니다.

• props

• $emit - 구성 요소 캡슐화가 더 일반적으로 사용됩니다.

• .sync - 구문 설탕

• $ attrs 및 $listeners - 구성 요소 캡슐화에 일반적으로 사용됨

• privide 및 inject - 상위 구성 요소

다음은 일상적인 개발에 자주 사용되는

1 및 props

를 각각 소개합니다. 간단히 말하면, 수도관처럼 상위 구성요소의 데이터가 하위 구성요소로 위에서 아래로 흐르며 역방향으로 흐를 수 없는 것처럼 소품을 통해 하위 구성요소에 데이터를 전달할 수 있습니다. 이는 Vue 디자인 도입의 단일 데이터 흐름이기도 합니다.

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})

2. $emit

공식적인 소개는 현재 인스턴스에서 이벤트를 트리거하는 것이며 추가 매개변수가 리스너 콜백에 전달됩니다.

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})

3. .sync 수정자

는 vue1.x에서 양방향 바인딩 기능으로 존재했습니다. 즉, 하위 구성 요소가 상위 구성 요소의 값을 수정할 수 있습니다. 단방향 데이터 흐름이라는 설계 개념을 위반했기 때문에 vue2.x에서는 제거되었지만 이 .sync 수정자는 vue 2.3.0+ 이상에서 다시 도입되었습니다. 그러나 이는 컴파일 타임 구문 설탕으로만 존재합니다. 상위 구성 요소의 속성을 자동으로 업데이트하는 v-on 리스너로 확장됩니다.

경우에 따라 소품에 "양방향 바인딩"을 수행해야 할 수도 있습니다. 불행하게도 진정한 양방향 바인딩은 하위 구성 요소가 상위 또는 하위 구성 요소의 명백한 변경 소스 없이 상위 구성 요소를 수정할 수 있기 때문에 유지 관리 문제를 발생시킵니다.

구문 설탕은 다음 형식으로 작성됩니다

<text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event">
</text-document>

따라서 .sync 구문 설탕을 사용하여 다음 형식으로 축약할 수 있습니다.

<text-document v-bind:title.sync="doc.title"></text-document>

양방향 바인딩을 구현하는 방법(예: 텍스트의 값 변경)

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
  template: `
    <div class="input-group">
      <label>姓名:</label>
      <input v-model="text">
    </div>
  `,
  props: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  components: {
    Login
  }
})

코드에는 문장이 하나만 있습니다.

this.$emit('update:name', newVal)

공식 구문은 다음과 같습니다. update:myPropName 여기서 myPropName은 prop 값을 나타냅니다. 업데이트됩니다. 물론 .sync 구문 설탕을 사용하지 않고 위의 .$emit을 사용하면 동일한 효과를 얻을 수 있습니다

4. $attrs 및 $listeners

공식 웹사이트에서는 $attrs를 다음과 같이 설명합니다.

props로 인식되고 획득되는 상위 범위 속성 바인딩(클래스 및 스타일 제외)에 없는 항목을 포함합니다. 구성 요소가 소품을 선언하지 않으면 모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"를 통해 전달될 수 있습니다. - 상위 수준 구성 요소를 생성할 때 매우 유용합니다.

공식 웹사이트에서는 $listeners를 다음과 같이 설명합니다.

　상위 범위의 v-on 이벤트 리스너를 포함합니다(.native 수정자 없음). v-on="$listeners"를 통해 내부 구성 요소로 전달할 수 있습니다. 더 높은 수준의 구성 요소를 만들 때 매우 유용합니다.

$attrs 및 $listeners 속성은 두 개의 저장 상자와 같습니다. 하나는 속성 저장을 담당하고 다른 하나는 이벤트 저장을 담당합니다. 둘 다 객체 형식으로 데이터를 저장합니다.

<div id="app">
  <child
    :foo="foo"
    :bar="bar"
    @one.native="triggerOne"
    @two="triggerTwo">
  </child>
</div>

let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})

보시다시피 사용할 수 있습니다. 데이터를 저장하는 $attrs 및 $listener 필요한 곳에 전달, 호출 및 처리하는 것은 여전히 ​​매우 편리합니다. 물론 v-on="$listeners"를 통해 레벨별로 전달할 수도 있으며, 자손은 끝이 없을 것입니다!

5, private and inject

provide/inject에 대한 공식 설명을 살펴보겠습니다.

　 Provide 및 inject는 주로 고급 플러그인/구성 요소 라이브러리에 대한 사용 사례를 제공합니다. 애플리케이션 코드에서 직접 사용하는 것은 권장되지 않습니다. 그리고 이 옵션 쌍은 구성 요소 계층 구조의 깊이에 관계없이 상위 구성 요소가 모든 하위 구성 요소에 종속성을 주입할 수 있도록 함께 사용해야 하며 업스트림 및 다운스트림 관계가 설정된 시점부터 항상 적용됩니다.

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: &#39;<h2>son</h2>&#39;,
  inject: {
    house: {
      default: &#39;没房&#39;
    },
    car: {
      default: &#39;没车&#39;
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: &#39;￥4500&#39;
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> &#39;房子&#39;, &#39;车子&#39;, &#39;￥10000&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  provide: {
    house: &#39;房子&#39;,
    car: &#39;车子&#39;,
    money: &#39;￥10000&#39;
  },
  components: {
    Son
  }
})

더 많은 예를 보려면 element-ui 소스 코드를 참조하세요. 그 중 다수가 이 방법을 사용합니다

관련 권장 사항: "vue.js tutorial"

위 내용은 vuejs에서 부모-자식 통신을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!