Vue2 props组件通信-父子组件传值

一、父组件向子组件传值

1、流程图

2、父组件代码

<template>
  <div class="app">
    <UserInfo
    :username='username'
    :age='age'
    :isSingle='isSingle'
    :car='car'
    :hobby='hobby'
    ></UserInfo>
  </div>
</template>
 
<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>
 
<style>
</style>

3、子组件代码

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle ? '是' : '否'}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好： {{hobby.join('、')}}</div>
  </div>
</template>
 
<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>
 
<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

二、子组件向父组件传值

1、流程图

原图下载：https://download.csdn.net/download/weixin_47401101/88787757

2、父组件代码 App.vue

<template>
  <!-- 主体区域 -->
  <section id="app">
    <ToDoHeader v-on:add='handleAdd'></ToDoHeader>
    <ToDoMain :list='list'></ToDoMain>
    <ToDoFooter></ToDoFooter>
  </section>
</template>
 
<script>
import ToDoFooter from './components/ToDoFooter.vue'
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
 
// 数据要通过父组件提供
export default {
  data () {
    return {
      list:[
        {id:1,name:'打篮球'},
        {id:2,name:'看电影'},
        {id:3,name:'逛街'}
      ]
    }
  },
  methods:{
    handleAdd(todoName){
      // 数据这样就传过来了
      this.list.unshift({
        id:+new Date(),
        name:todoName
      })
    }
  },
  components:{
    ToDoHeader,
    ToDoMain,
    ToDoFooter,
  }
}
</script>
 
<style>
 
</style>

3、子组件代码 

ToDoHeader.vue

<template>
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input 
      v-model='todoName' 
       v-on:keyup.enter='handleAdd'
      placeholder="请输入任务" class="new-todo" />
      <button 
      v-on:click='handleAdd'
      class="add">添加任务</button>
    </header>
</template>
 
<script>
export default {
  data(){
    return{
      todoName:''
    }
  },
  methods:{
    handleAdd(){
      //子组件向父组件传值
      if(this.todoName.trim()===''){
        alert('任务名称不能为空！')
        return
      }
      this.$emit('add',this.todoName)
      this.todoName=''
    }
  }
}
</script>
 
<style>
 
</style>

ToDoMain.vue

<template>
  <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for='(item,index) in list' :key='item.id'>
          <div class="view">
            <span class="index">{{index + 1}}.</span> <label>{{item.name}}</label>
            <button class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
</template>
 
<script>
export default {
    props:{
        list:Array,
    }
}
</script>
 
<style>
 
</style>