标签:-- 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>
还可以把整个组件传过去
标签:-- method tle one nbsp com code 按钮 port
原文地址:https://www.cnblogs.com/sulanlan/p/9929988.html