父組件向子組件中傳值
1. Vue實例可以看做是大的組件，那么在其內部定義的私有組件與這個實例之間就出現了父子組件的對應關系。
2. 父子組件在默認的情況下，子組件是無妨訪問到父組件中的數據的，所以要想在子組件中使用父組件的數據的時候，就需要以屬性綁定的形式，將父組件的數據傳遞到子組件中。
3. 通過屬性綁定傳遞來的數據無法再子組件中直接使用，需要在props中重新定義以后才可以使用。例：props：['變量名']。props是一個數組。
4. 子組件中的data數據都是私有，子組件可以通過ajax請求到的數據放到data上使用。
5. props：[ ]中的數據都是只讀的，不可以進行改變，如果強行改變頁面也會顯示改變后的效果，但是會有警告。
<body>
<div id="app">
<com1 v-bind:fudata="msg"></com1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的數據----1234'
},
components: {
com1: {
template: '<h1>這是子組件----5678---------{{fudata}}</h1>',
props: ['fudata']
}
},
})
</script>
父組件向子組件傳遞方法
1. 子組件要想獲得父組件中的方法，需要使用時間綁定機制。
2. 在子組件中要想使用父組件傳遞過來的方法，需要用到一個新的方法 this.$enit.('方法名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/Vue.js"></script>
</head>
<body>
<div id="app">
<com1 @func="show"></com1>
</div>
<template id="ttpp">
<div>
<h1>子組件</h1>
<input type="button" value="通過點擊來獲得父組件上的方法" @click="self">
</div>
</template>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
show() {
console.log("OK")
}
},
components: {
com1: {
template: '#ttpp',
methods: {
self() {
this.$emit('func');
}
}
},
},
})
</script>
</html>