码迷,mamicode.com
首页 > 其他好文 > 详细

vue 父组件给子组件传值

时间:2018-11-08 18:17:03      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:--   method   tle   one   nbsp   com   code   按钮   port   

父组件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>

 还可以把整个组件传过去

vue 父组件给子组件传值

标签:--   method   tle   one   nbsp   com   code   按钮   port   

原文地址:https://www.cnblogs.com/sulanlan/p/9929988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!