vue 하위 구성 요소를 사용하여 상위 구성 요소에 데이터를 전달하는 방법

이번에는 vue 하위 컴포넌트를 사용하여 상위 컴포넌트로 데이터를 전송하는 방법과 vue 하위 컴포넌트를 사용하여 상위 컴포넌트로 데이터를 전송하는 주의 사항에 대해 설명하겠습니다. 바라보다.

아래 그림과 같이

조작이 없을 경우 상위 컴포넌트의 값은 0

더하기 기호를 클릭하면 상위 컴포넌트의 값은 1

빼기 기호를 클릭하면 상위 컴포넌트의 값이 1이 되고 값이 1씩 감소하여 0

이 됩니다. 특정 코드는 직접 올려드리도록 하겠습니다. 코드가 바로 공개됩니다.

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>子组件将数据传递给父组件</title>
  <script></script>

<script>
//定义一个组件
Vue.component(&#39;counter&#39;, {
 template: &#39;\
    <p style="background:#eee;width: 238px;">\
        <p>这里是子组件里面的内容！\
        <p style="margin-top:20px">\
        <p>\
          <span style="margin-right:20px;display:inline-block;">加法运算<button @click="incrementCounter">+\
        \
        <p>\
          <span style="margin-right:20px;margin-top:20px;display:inline-block;">减法运算<button @click="deleteCounter">-\
        \
    \
  &#39;,
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  incrementCounter: function () {
   this.counter += 1;
   this.$emit(&#39;increment&#39;,1);
  },
  deleteCounter: function () {
   this.counter -= 1;
   this.$emit(&#39;increment&#39;,2);
  }
 }
})
//执行一个组件
window.onload = function(){
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      total: 0
    },
    methods:{
      incrementTotal: function (val) {
        if(val==1){
          this.total += 1;
        }else{
          if(this.total<=0){
            this.total = 0;
          }else{
            this.total -= 1;
          }
        }
      }
    }
  })
}
</script>

  <p>
    </p><p>这里是父组件里面的内容！</p>    
    <p>子组件传递的值：<b>{{ total }}</b></p>
    <counter></counter>
  

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue 소스 코드를 사용하여 이벤트 메커니즘을 구문 분석하는 방법

JS를 작동하여 사용자의 도시와 지리적 위치를 얻는 방법

위 내용은 vue 하위 구성 요소를 사용하여 상위 구성 요소에 데이터를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!