1.父組件傳遞數(shù)據(jù)給子組件
思路：在父組件中定義inputValue屬性玻佩，然后再props接收參數(shù)
注意此方法是傳遞的動態(tài)數(shù)據(jù)，在父組件接收時需要應(yīng)用：（v-bind的簡寫）接收
代碼如下：
父組件
<template>
<div>
<input type="text" v-model="msg">
<br>
//將子控件屬性inputValue與父組件msg屬性綁定
<child :inputValue="msg"></child>
</div>
</template>
<style>
</style>
<script>
export default{
data(){
return {
msg: '請輸入'
}
},
components: {
child: require('./Child.vue')
}
}
</script
子組件
<template>
<div>
<p>{{inputValue}}</p>
</div>
</template>
<style>
</style>
<script>
export default{
props: {
inputValue: String
}
}
</script>
2.子組件向父組件傳遞
（1）子組件$emit屹逛，父組件v-on
思路：子組件使用$emit,$('自定義的事件名稱',需要傳遞的參數(shù)),在父組件中v-on:自定義事件的名稱=“接收到參數(shù)后的方法”
代碼如下：
父組件
<template>
<div>
//message為子控件上綁定的通知；recieveMessage為父組件監(jiān)聽到后的方法
<child2 v-on:message="recieveMessage"></child2>
</div>
</template>
<script>
import {Toast} from 'mint-ui'
export default{
components: {
child2: require('./Child2.vue'),
Toast
},
methods: {
recieveMessage: function (text) {
Toast('監(jiān)聽到子組件變化'+text);
}
}
}
</script>
子組件
<template>
<div>
<input type="text" v-model="msg" @change="onInput">
</div>
</template>
<script>
export default{
data(){
return {
msg: '請輸入值'
}
},
methods: {
onInput: function () {
if (this.msg.trim()) {
this.$emit('message', this.msg);
}
}
}
}
</script>
