vue父子间传值

搭建项目：本项目使用vue-cli脚手架工具直接搭建
项目结构：

1. 父传子

在父组件调用自组件时，给子组件绑定自定义属性，在子组件中使用props接收，子组件内部直接当成属性使用
父组件调用子组件：

<Son title="hello world" value="test" :city="selectCity"/>

子组件接收：

props: ['title', 'value', "city"],

app.vue

<template>
<div id="app">
  <h1>hello world</h1>

  <Father/>

</div>
</template>

<script>
import Father from './components/Father'
export default {
  components: {
    Father
  }
}
</script>

<style>

</style>

father.vue

<template>
<div class="father">
  <h1>父组件</h1>
  
  <!-- 点击相对应的button子组件中会有相对应的数据变化 -->
  <nav>
    <button v-for="(item, index) in cityList" :key="index"
      @click="selectAction(item)">
      {{item}}
    </button>
  </nav>
  
	<!-- 父组件调用子组件，如果自定义属性是变量时，则需要 ：绑定属性  -->
  <Son title="hello world" value="test" :city="selectCity"/>

</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      cityList: ['深圳', '广州', '上海'],
      selectCity: ''
    }
  },
  methods: {
    selectAction(city){
      console.log(city);
      this.selectCity = city;
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">
  <h1>子组件</h1>

  <p>{{title}}</p>
  <p>{{value}}</p>

<!-- 根据父组件中传过来的City值的变化，以下的数据而变化 -->
  <p>推荐你去玩：</p>
  <ul>
    <li v-for="(item, index) in map[city]" :key="index">
      {{item}}
    </li>
  </ul>

</div>
</template>

<script>
export default {

  // 子组件中使用props接收父组件传过来的值， props也是组件的属性，但是实例没有配置项，属于外部属性
  props: ['title', 'value', "city"],

  // 内部属性
  data(){
    return {
      map: {
        '上海': ['东方明珠', '外滩', '迪斯尼'],
        '深圳': ['世界之窗', '欢乐谷', '千锋'],
        '广州': ['长隆', '广州塔', '千锋']
      }
    }
  }
}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>

2.子传父（两种方式）

• 在父组件调用子组件时，给子组件绑定自定义属性, 这个自定义属性是一个函数。
  在子组件内部使用props接收。当需要传值给父组件时，就调用这个属性，通过调用函数传值给父组件。
• 在父组件调用子组件时，给子组件绑定自定义事件，事件的实现在父组件中，是一个函数。
  当子组件需要传值给父组件时，就使用this.$emit()触发该事件，并传参进去，那么父组件的函数就可以接收到参数了。

第一种方式：

父组件调用子组件：

 <Son :onSend="handleSendAction"/>

函数实现

//函数的实现，也就是传入子组件中的函数，参数为接收子组件传过来的值
    handleSendAction(val){
      console.log('触发了:', val);
      this.arr.push(val);
    }
  }

子组件接收：

 props: {
   onSend: Function
 },

子组件传值触发事件

<!-- 通过button按钮的click触发事件 -->
  <button @click="btnAction">发送</button>

// 通过触发事件，触发父组件传过来的函数
    btnAction(){
      console.log(this.value);
      // 调用父组件的属性，这个属性是一个函数，传入参数为子组件传过去的值
      this.onSend(this.value);
    }
 

father.vue

<template>
<div class="father">
  <h1>父组件</h1>

  <p>接收到了：</p>
  <ul>
    <li v-for="(item,index) in arr" :key="index">
      {{item}}
    </li>
  </ul>

<!-- 父组件调用子组件，绑定一个函数属性，函数在methods中实现 -->
  <Son :onSend="handleSendAction"/>


</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      arr: []
    }
  },
  methods: {
  //函数的实现，也就是传入子组件中的函数，参数为接收子组件传过来的值
    handleSendAction(val){
      console.log('触发了:', val);
      this.arr.push(val);
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">

  <h1>子组件</h1>

  <input type="text" v-model.lazy="value"/>

<!-- 通过button按钮的click触发事件 -->
  <button @click="btnAction">发送</button>


</div>
</template>

<script>

export default {
//父组件接收，该值为一个函数类型
  props: {
    onSend: Function //确定该值为一个函数
  },
  data(){
    return {
      value: ''
    }
  },
  methods: {
  // 通过触发事件，触发父组件传过来的函数
    btnAction(){
      console.log(this.value);
      // 调用父组件的属性，这个属性是一个函数，传入参数为子组件传过去的值
      this.onSend(this.value);
    }
  }

}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>

第二中方式：

父组件调用子组件：

 <Son @send="handleSendAction" />

函数实现：

 handleSendAction(val, ...rest){
      console.log('触发了:', val, rest);
      this.arr.push(val);
    }

子组件触发：

<button @click="btnAction">发送</button>

btnAction(){
      console.log(this.value);

      // 触发组件标签上的事件
      // 自定义事件
      // 参数1:自定义事件的名字
      // 参数2:调用事件的参数
      this.$emit('send', this.value, 1, 2, 3);
    }

father.vue

<template>
<div class="father">
  <h1>父组件</h1>

  <p>接收到了：</p>
  <ul>
    <li v-for="(item,index) in arr" :key="index">
      {{item}}
    </li>
  </ul>

  <Son @send="handleSendAction" />


</div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  data(){
    return {
      arr: []
    }
  },
  methods: {
    handleSendAction(val, ...rest){
      console.log('触发了:', val, rest);
      this.arr.push(val);
    }
  }
}
</script>

<style scoped>
.father{
  border: 5px solid #ddd;
  padding: 50px;
}
</style>

son.vue

<template>
<div class="son">

  <h1>子组件</h1>

  <input type="text" v-model.lazy="value"/>

  <button @click="btnAction">发送</button>


</div>
</template>

<script>

export default {

  data(){
    return {
      value: ''
    }
  },
  methods: {
    btnAction(){
      console.log(this.value);

      // 触发组件标签上的事件
      // 自定义事件
      // 参数1:自定义事件的名字
      // 参数2:调用事件的参数
      this.$emit('send', this.value, 1, 2, 3);
    }
  }

}
</script>

<style scoped>
.son{
  border: 5px solid #999;
  padding: 50px;
}
</style>