一、父组件向子组件传值

父组件：

<child :inputName="name"></child>

 1 <script>
 2     import child from './sub-select.vue';
 3     export default {
 4         components: { child },
 5         data(){
 6             return {
 7                 name: '父组件中的值' 
 8             }
 9         },
10         methods:{
11             
12         }
13     }
14 </script>

子组件：通过props接收

<view>{{inputName}}</view>

 1 <script>
 2     export default {
 3         // props: ['inputName'],
 4                 props: {
 5             inputName: String
 6         },
 7         data(){
 8             return {
 9                  
10             }
11         },
12         methods:{
13             
14         }
15     }
16 </script>        

二、子组件向父组件传值

子组件：通过$emit()

<button @click="sendMes">send</button>

 

 1 <script>
 2     export default { 
 3         data(){
 4             return {
 5                 message: '子组件的值'
 6             }
 7         },
 8         methods:{
 9             sendMes() {
10                 this.$emit('child-event', this.message)     // 传递的事件名称不支持驼峰命名
11             }
13         }
14     }
15 </script>

 

父组件：

<child @child-event="parentFn"></child>
<div>{{message}}</div>

 

 1 <script> 
 2     import child from './sub-select.vue';
 3     export default { 
 4         components: { child },
 5         data(){
 6             return {
 7                 message: '' 
 8             }
 9         },
10         methods:{
11             parentFn(payload) {
12                 this.message = payload; 
13             }  
14         }
15     }
16 </script>

 

三、父组件调用子组件方法

父组件：

 

子组件：

 

四、子组件调用父组件方法

父组件：

 

子组件：