前端笔记：vue组件间传值

1. 父子组件间传值（props）：

1.1 父组件向子组件传值

1.1.1 静态

定义子组件，在组件中注册props

<template>
  <div>
    <div>{{message}}(子组件)</div>
  </div>
</template>
 
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
 
<style>
</style> 

在父组件中引入子组件，并传入子组件内需要的值

<template>
  <div>
    <div>父组件</div>
    <child-component :message="parentMsg"></child-component>  
  </div>
</template>
 
<script>
import child-component from './child' //引入child组件
export default {
  data() {
      return {
        parentMsg: 'a message from parent' //在data中定义需要传入的值
      }
    },
    components: {
      child-component
    }
 
}
</script>
 
<style>
</style> 

參考：

https://www.imooc.com/article/75004?block_id=tuijian_wz

https://segmentfault.com/a/1190000011882494

https://segmentfault.com/a/1190000014704088

https://blog.csdn.net/lianwenxiu/article/details/87898688

https://www.jianshu.com/p/8e06a83c955d

https://www.jianshu.com/p/af9cb05bfbaf