一、父组件向子组件传值
父组件:
<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>
三、父组件调用子组件方法
父组件:
子组件:
四、子组件调用父组件方法
父组件:
子组件: