Vue 하위 구성 요소와 상위 구성 요소 간의 통신(코드 포함)

1. 환경 설정

• vue-cli 다운로드: npm install -g vue-clinpm install -g vue-cli

• 初始化项目：vue init webpack vue-demo

• 进入vue-demo文件夹：cd vue-demo

• 下载安装依赖：npm install

• 运行该项目：npm run dev

2.父组件向子组件传值

• src/components/文件夹下建一个组件，Home.vue

• 创建子组件，在src/components/文件夹下新建一个文件夹，在新建文件夹中新建一个组件Child.vue

在Child.vue中创建props，用于接收父组件传递的值

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

在Home.vue中注册Child组件，并在template的p标签中添加home-child标签，标签中使用v-bind

프로젝트 초기화: vue init webpack vue-demo code ><br><img src="https://img.php.cn//upload/image/829/436/269/1533541837851476.png" title="1533541837851476.png" alt="Vue 하위 구성 요소와 상위 구성 요소 간의 통신(코드 포함)">

vue-demo 폴더 입력: cd vue-demo

종속성 다운로드 및 설치: npm install

프로젝트 실행: npm run dev

2 상위 구성 요소는 값을 하위 구성 요소에 전달합니다.

아래에 구성 요소를 만듭니다. src/comComponents/ 폴더, Home.vue

하위 구성 요소를 만들고, src/comComponents/ 폴더 아래에 새 폴더를 만들고, 새 구성 요소 Child.vue

를 만듭니다. 새 폴더에서 Child.vue에 props를 생성하여 상위 컴포넌트가 전달한 값을 받습니다

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

Home.vue에 Child 컴포넌트를 등록하고, 템플릿의 p 태그에 home-child 태그를 추가합니다. 태그의 v-bind 명령어는 c에 바인딩됩니다. 자식 컴포넌트는 props를 통해 부모 컴포넌트가 전달한 값을 받을 수 있습니다.

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>

Result

🎜3. 하위 구성 요소는 값을 상위 구성 요소에 전달합니다. 🎜🎜클릭 이벤트 ChildClick을 버튼에 바인딩합니다. 🎜이벤트 함수에서 $emit를 사용하여 사용자 정의 이벤트를 트리거하고 매개변수를 전달합니다. is 하위 구성 요소에서 상위 구성 요소로 전달되는 값입니다. 🎜

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>

🎜상위 구성 요소의 home-child 태그에서 맞춤 이벤트를 듣고 해당 이벤트에 응답하는 ShowChild 메서드를 추가하세요. 🎜rrreee🎜결과: 🎜🎜🎜🎜버튼 클릭 후: 🎜🎜🎜🎜관련 기사: 🎜🎜Vue 컴포넌트와 하위 및 상위 간의 통신에 대한 자세한 설명 (2) 🎜🎜🎜🎜Vue 하위 컴포넌트와 Vue 하위 컴포넌트 간의 통신에 대한 자세한 설명 상위 구성요소🎜🎜

위 내용은 Vue 하위 구성 요소와 상위 구성 요소 간의 통신(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!