父組件傳遞數據到子組件
傳遞一個String爲例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
margin: 0;
}
.title_bar {
background-color: red;
height: 3.125rem;
line-height: 3.125rem;
text-align: center;
color: white;
}
</style>
</head>
<body>
<template id="header">
<div>
<div class="title_bar">
{{header_text}}
</div>
</div>
</template>
<div id="app">
<titlebar :header_text='header_text'></titlebar>
</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//定義子組件接收header_text的數據類型
Vue.component('titlebar', {
template: '#header',
props:['header_text'],
});
//定義父組件要傳遞的header_text
new Vue({
el: '#app',
data: {
header_text: '父組件頭部內容',
},
methods: {
}
});
</script>
</html>
子組件傳遞數據到父組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子組件傳值給父組件</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div>
{{name}}
</div>
<child @get='getData'></child>
</div>
<template id="child">
<div @click="sendData">
發送數據
</div>
</template>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('child', {
template: "#child",
methods: {
sendData() {
var obj = {
'name': '鏡花水月'
};
this.$emit('get', obj);
}
}
});
new Vue({
el: '#app',
data: {
name: '',
},
methods: {
getData(obj) {
this.name = obj.name;
}
},
});
</script>
</html>