vue 父组件给子组件传值

父组件Home.vue

 1 <template>
 2    <div>
 3 <h2>这是一个首页{{msg2}}</h2><button>按钮</button>
 4 <v-header :title="title"></v-header><!--子组件并接收传值-->
 5 </div> 
 6 </template>
 7 
 8 <script>
 9 import Header from './Header.vue';//引入子组件
10 
11 export default {
12   data() {
13     return {
14       msg2: "我是一个方法",
15       title:'我是父组件home里面的data-title' //要传的值
16     }
17   },
18   components:{
19       'v-header':Header//注册子组件
20   }
21 }
22 </script>

子组件Header.vue

<template>
   <div> <h2>我是header---{{title}}</h2></div> <!--title的值来自于父组件-->
</template>

<script>
export default {
data(){
    msg:'msgg'
},
methods:{

},
props:['title']//接受父组件传过来的值
}
</script>

<style>

</style>

猜你喜欢

转载自www.cnblogs.com/sulanlan/p/9929988.html