1.
父組件調用子組件，並且向子組件傳遞參數，做了說明，那么在子組件當中，怎么去接收父組件傳來的參數？其實很簡單。在子組件的script里面，export default這個參數json里面，有一個props的項，可以需要接收的參數定義好
<body>
<div id="app">
<!-- 父組件 ，可以在引用子組件的時候，通過 屬性綁定（v-bind :） 的形式
把需要的東西 以屬性綁定的形式 傳遞到子組件 里面 -->
<com1 v-bind:ee="msg"></com1>
</div>
<script>
//這個 Vm 相當於是一個組件 是父組件
var vm=new Vue({
el:'#app',
data:{
msg:'123 啊 父組件的數據'
},
methods:{
},
//下面這個component是子組件
//結果：經過演示，發現，子組件，默認不能訪問 父組件中的 data 數據和 methods 方法
components:{
com1:{
// data 里面的數據 都是可讀可改的
data(){//注意：子組件的 data 不是父組件傳來的 是自己私有的自己創建的
return{
title:'123',
content:'www'
}
},
template:'<h2 @click="change"> 這是子組件 ---{{ ee }}</h2>',
// 注意：組件中的 所有props 中的數據 都是通過 父組件傳遞過來的
// props 中的數據只讀 不能重新賦值
props:['ee'],//把父組件傳遞過來的 ee 屬性 在props 數組中 定義一下
//這樣才能使用數據
methods:{
change(){
this.ee='你被修改了'
}
}
}
}
})
</script>
</body>
</html>
2.
子組件往父組件傳遞參數
<div id="app">
<!-- 父組件向子組件 傳遞方法 使用事件的綁定機制 v-on： @
當我們自定義的一個 事件屬性 之后 那么 子組件就能夠 通過某些方式，來掉用這個方法-->
<com2 @func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1 >這是子組件</h1>
<input type="button" value="這是子組件的按鈕 -點擊他 觸發 父組件傳遞過來的 func 方法" @click="myclick">
</div>
</template>
<script>
//定義了一個自變量類型的 組件模板對象
var com2={
template:'#tmp1',
//通過了指定了一個id 表示說 要加載這個id 的template 元素中的內容 當做 組件的HTML結構
methods:{
myclick(){
// emit 願意：是調用的意思
this.$emit('func',this.sonmsg)
// 這里的sonmsg 參數是傳到下面的 show方法 的data 參數在傳到
// 父組件的data 里面
}
},
data(){
return {
sonmsg:{name:'小頭兒子',age:6}
}
}
}
var vm=new Vue({
el:'#app',
data:{
datamsgFromSon:''
},
methods:{
show(data){
// console.log('調用了父組件的 show 方法--- '+data)
this.datamsgFromSon=data
}
},
components:{
// 直接給上面定義的變量 com2 就不需要 在命名了 com2:com2 簡寫在下面
com2
}
})
</script>
</body>
</html>