vue父組件向子組件傳值的方法:
vue父組件是通過props向子組件傳值的,示例如下:
1.父組件調用子組件時,綁定動態屬性。
<v-header :title='title' :homemsg='msg'></v-header>
2.在子組件中通過props接收父組件傳過來的數據。
props: ['title']props: {
'title':String,
}
3.在子組件中使用。
//home.vue為父組件,header.vue為子組件//home.vue里面引入子組件header.vue
<script>
import header from './header' //1.引入組件
export default {
components: {
'v-header':header //2.掛載組件
},
data () {
return {
title:'111',
msg:'我是home組件'
}
},
methods: {
run(data){
alert('我是home組件的run方法'+data)
}
}
}
</script>
<template>
<!-- 所有的內容要被根節點包含起來 -->
<div>
<v-header :title='title' :homemsg='msg' :run='run' :home='this'></v-header> //3.在模板中使用
</div>
</template>