vue 서브어셈블리와 서브어셈블리 사이의 전송 값

이 글은 주로 서브 구성 요소와 부모 구성 요소 간의 전송값을 설명하고 so~다음 코드는 css 스타일을 보여주지 않습니다
1. 부모 구성 요소가 서브 구성 요소로 값을 전달한다.
1 . src/components/디렉터리에 Search를 만듭니다.vue는 에서 props에서 전송된 값을 수신하기 위해 속성을 만들어야 한다.그리고 또는v-bindtemplate 템플릿(html)에서{{ }} 전송된 값을 얻을 수도 있고 js에서 이 값을 얻을 수도 있습니다.

<template>
  <div class="search">
    <input type="text" :placeholder="'Please enter '+searchType" />
    <button>Search {{searchType}}button>
  div>
template>

<script>
export default {
  name: 'Search',
  props: ["searchType"],
  created() {
    console.log(this.searchType);
  }
}
script>

2.1. this.searchTypeHome.vue에 Search 구성 요소를 등록하고template에 Search 탭을 추가합니다. 탭에 속성을 추가하고 값을 부여합니다. 이 속성은 searchType의 속성과 같습니다.

<template>
  <div class="container">
    <Search searchType="name">Search>
  div>
template>

<script>
import Search from '@/components/Search'
export default {
  name: 'Home',
  components: {
    Search
  }
}
script>

2.2 속성에 대해서도 props 동적 귀속 가능

<template>
  <div class="container">
    <Search :searchType="type">Search>
  div>
template>

<script>
import Search from '@/components/Search'
export default {
  name: 'Home',
  components: {
    Search
  },
  data() {
  	return {
  	  type: 'name'
  	}
  }
}
script>

2. 서브어셈블리가 모 어셈블리에 값을 전달합니다.
1 . searchType의 button에 클릭 이벤트v-bind를 연결하고 input에 를 연결한다.이벤트를 클릭해야 하는 함수에서 @click="search" 를 사용하여 사용자 정의 이벤트를 터치하고 매개 변수를 전달합니다.

<template>
  <div class="search">
    <input type="text" :placeholder="'Please enter '+searchType" v-model="searchValue" />
    <button @click="search">Search {{searchType}}button>
  div>
template>

<script>
export default {
  name: 'Search',
  props: ["searchType"],
  data() {
    return {
      searchValue: '',
    }
  },
  methods: {
    search() {
      this.$emit('bindSearch', this.searchValue);
    }
  }
}
script>

2 . v-model="searchValue"의 하위 구성 요소 탭에서 사용자 정의 이벤트를 감청하고 이벤트에 대한 처리 방법을 추가합니다

<template>
  <div class="container">
    <Search :searchType="type" @bindSearch="bindSearch">Search>
  div>
template>

<script>
import Search from '@/components/Search'
export default {
  name: 'Home',
  components: {
    Search
  },
  data() {
  	return {
  	  type: 'name'
  	}
  },
  methods: {
    bindSearch(value) {
      console.log(value)
    }
  },
}
script>

서브어셈블리와 서브어셈블리 간의 통신에서 서브어셈블리가 서브어셈블리에 값을 전달하든 서브어셈블리가 서브어셈블리에 값을 전달하든 그들은 모두 중간 매체가 있다는 공통점을 가지고 있다. 서브어셈블리가 서브어셈블리에 있는 매체는 사용자 정의 이벤트이고 서브어셈블리가 서브어셈블리에 있는 매체는 props의 속성이다.이 두 가지를 정확히 파악하면 부자간의 통신에 대해 이해하기 쉽다.