Vue【有与无】【F2】父子组件之间的传值

目录

1.父组件向子组件传值

2.子组件向父组件传值

2.1.基本概念

3.举例

---

1.父组件向子组件传值

 

第一个就是要明白怎么在父页面中向子组件中传值？

• 给子组件传入一个静态的值：

<blog-post title="value"></blog-post>

• 给子组件传入一个动态的值

<!--动态赋予一个变量的值-->
<blog-post v-bind:title="post.title.value"></blog-post>

<!--动态赋予一个表达式的值-->
<blog-post v-bind:title="post.title.value + ' by ' + post.name.value"></blog-post>

 当然，传的值可以是数字、对象、数组等等，参见vue官网。

• 组件实例的作用域是孤立的；
• 子组件要显式的用props选项声明它预期的数据

// 某个子组件中：
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

 

以上就是单向数据流的一般表现了： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

 

2.子组件向父组件传值

 

2.1.基本概念

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

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

 

3.举例

父子互传

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

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


<!-- 子组件 test-child-->
<template> 
<div>
    <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>