vue组件传值之父传子

Posted 2022-05-25 v616

1.父组件给子组件传值  home父组件  header子组件  关键字props

home代码

<template>
  <div>
    <v-header :title="title" :run="run"></v-header>
    <h2>我是home组件</h2>
  </div>

</template>


<script>
import Header from ‘./Header‘
export default 
  data() 
    return 
      msg: "msg",
      title:"hello"
    ;
  ,
  components:
    ‘v-header‘:Header
  ,
  methods: 
    run(val) 
      alert(val);
    
  ,

  
;
</script>

header代码

<template>
  <div>

    <h1>我是header组件--title</h1>
    <button @click="run(123123)">调父组件函数</button>
  </div>

</template>


<script>
export default 
  data() 
    return 
    ;
  ,
  props:[‘title‘,‘run‘]
  
;
</script>

 效果：