vue 父组件给子组件传值

Posted 2021-01-18 sulanlan

父组件Home.vue

 1 <template>
 2    <div>
 3 <h2>这是一个首页{{msg2}}</h2><button>按钮</button>
 4 <v-header :title="title" :homemsg=‘msg‘  run=‘run‘></v-header><!--子组件并接收传值。两个数据，一个方法。其中run方法不能加括号，加括号会执行方法-->
 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   },
    methods:{
   run(data){  //data为子组件传过来的参数
alert(‘我是home父组件的run方法‘ +data); //传方法。 +data是拼接数据
}
}
21 }
22 </script>

子组件Header.vue

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

<button @click:run(123)>调用父组件传递的方法</button><!--调用父组件传递的方法，如果不传值写@click:run()，如果传值外面双引号，里面单引号@click:"run(‘123‘)"-->

</template>
 <script>
 export default { 
data(){
 msg:‘msgg‘ 
}, 

methods:{ },

props:[‘title‘，‘homemsg‘， ‘run‘]//接受父组件传过来的值 } 

</script> 
<style> 
</style>

 还可以把整个组件传过去