Vue 父组件和子组件传值

一、父组件向子组件传值 Prop

你可以像这样给 prop 传入一个静态的值，例如：

<article-list title="文章名称"></article-list>

你可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->
<article-list :title="article.title"></article-list>

<!-- 动态赋予一个复杂表达式的值 -->
<article-list :title="`${article.title} by ${article.author}`"></article-list>

子组件要显式的用 props 选项声明它预期的数据，如：

// 子组件
export default {
  props: {
    title: {
      type: String,
      default: '文章名称'
    }
  }
}

 

二、子组件向父组件传值

在Vue中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送信息。

 

每个Vue实例都实现了事件接口：使用 $on(evntName) 监听事件；使用 $emit(eventName,optionalPayload) 触发事件。另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

---

父组件在组件上定义了一个自定义事件 childFn ，事件名为 parentFn 用于接受子组件传过来的 message 值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
        子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

 子组件是一个 buttton 按钮，并为其添加了一个 click 事件，当点击的时候使用 $emit() 触发事件，把 message 传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    data() {
        return {
          // 默认
          message: '子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>