vue子组件与父组件之间的传值

这篇文章主要讲解的是子组件与父组件之间的传值，so~以下代码均不展示css样式

一、父组件向子组件传值

1 . 在src/components/目录下，创建一个子组件Search.vue
在子组件中，需要在props中创建一个属性，用来接收父组件传过来的值；然后可以通过v-bind或{{ }}在template模板(html)中获取从父组件传入的值，也可以通过this.searchType在js中获取这个值。

<!-- 子组件 Search.vue -->
<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. 在父组件Home.vue中注册Search组件，并在template中加入Search标签，标签中添加一个searchType属性并赋值，这个属性需要跟父组件中的props的属性相同

<!-- 父组件 Home.vue -->
<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 也可以对searchType属性进行v-bind动态绑定

<!-- 父组件 Home.vue -->
<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>

二、子组件向父组件传值

1 . 给子组件中的button绑定一个点击事件@click="search"，给input绑定一个v-model="searchValue"；
在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<!-- 子组件 Search.vue -->
<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 . 在父组件中的子组件标签中监听该自定义事件并添加一个响应该事件的处理方法

<!-- 父组件 Home.vue -->
<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中的属性。抓准这两点对于父子通信就好理解了。