【Vue简易入门】父子组件传值

上次讲到了Vue的组件化概念，那这次来讲解下Vue里父子组件要怎么传值，也是学习Vue非常重要的一个知识点。这里我拿自己写的一个Todo List Demo来当做例子讲解。

父组件向子组件传值

父组件在子组件HTML标签中添加变量名和绑定data属性 ，子组件在props中添加变量名。在这个例子中，父组件为包含TodoList的页面，子组件为TodoList。

<!-- 这是父组件 -->

<template>
  <div id="menu">
    <div class="title">
      <h1>Vue Todo List</h1>
      <el-input v-model="inputValue" placeholder="请输入内容" style="width: 60%"></el-input>
      <el-button @click=handleSubmit()>添加待办项目</el-button>
    </div>
    <!-- 在子组件标签中添加变量名和绑定data属性 -->
    <TodoList title="待办清单" :addEvent="eventAdded"></TodoList>
  </div>
</template>

<script>
import TodoList from '@/components/TodoList'
export default {
  name: 'Menu',
  data () {
    return {
      inputValue: null,
      eventAdded: null,
    }
  },
  components: {
    TodoList,
  },
  methods: {
    handleSubmit () {
      this.eventAdded = this.inputValue;
    }
  }
}
</script>

父组件在引用子组件TodoList的标签中添加了传递的addEvent变量，并绑定给data中的eventAdded属性。这里注意，另一个不需要绑定data属性的变量title，在变量名前不需加冒号，传递值为静态值。

<!-- 这是子组件 -->

<template>
    <el-card>
      <span>{{title}}</span>
      <div v-for="(todo,index) in todoList" :key="index">
        {{todo}}
        <el-button>完成</el-button>
      </div>
    </el-card>
</template>

<script>
export default {
    name: "TodoList",
    data () {
        return {
            todoList: []
        }
    },
    // 在props中添加传递的变量名
    props: ['title', 'addEvent'],
    watch : {
      addEvent: {
        immediate: true,
        handler (val) {
          if (val != null) {
            this.todoList.push(val)
          }
        }
      }
    },
}
</script>

子组件在props里添加了title和addEvent，也就是父组件传递来的变量。这里注意，prop属性为单向数据传递，不能像data属性一样直接修改。

效果图：输入框中输入待办事项，点击“添加待办项目”，待办清单上便会显示

子组件向父组件传值

子组件在methods中写this.$emit()，父组件在子组件的HTML标签里绑定方法。

<!-- 这是子组件 -->

<template>
    <el-card>
      <span>待办清单</span>
      <div v-for="(todo,index) in todoList" :key="index">
        {{todo}}
        <el-button @click="finish(index)">完成</el-button>
      </div>
    </el-card>
</template>

<script>
export default {
    name: "TodoList",
    data () {
        return {
            todoList: ["sleep", "eat", "work"]
        }
    },
    // 在methods中写this.emit()传值给父组件
    methods: {
    	finish : function(index) {
            const eventFinished = this.todoList.splice(index, 1)[0]
            this.$emit('finishEvent', eventFinished)
        }
    }
}
</script>

子组件用handleFinish方法传递了eventFinished，传递方法名称为finishEvent。

<!-- 这是父组件 -->

<template>
  <div id="menu">
    <!-- 讲子组件传递的值绑定到接收方法 -->
    <TodoList @finishEvent="handleFinish"></TodoList>
    <div v-for="(finish,index) in finishList" :key="index">
      {{finish}}
    </div>
  </div>
</template>

<script>
import TodoList from '@/components/TodoList'
export default {
  name: 'Menu',
  data () {
    return {
      finishList: []
    }
  },
  components: {
    TodoList,
  },
  // 接收方法
  methods: {
    handleFinish (event) {
      this.finishList.push(event);
    }
  }
}
</script>

父组件在HTML标签中讲子组件传递的值绑定到接收方法，再用接收方法处理并显示在父组件上。

父子组件传值的基本方法就是这些，更多传值方法还有兄弟组件传值，Slot，Vue等方法，在以后的文章里可以讲讲。