父子组件之间传值、方法汇总
一、父组件向子组件传值
父组件:
<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>
三、父组件调用子组件方法
子组件:
<button @click="childMethod">点击子组件中的方法</button>
1 <script> 2 export default { 3 data(){ 4 return { 5 6 } 7 }, 8 methods:{ 9 childMethod() { 10 console.log('我是子组件中的方法') 11 } 12 } 13 } 14 </script>
父组件:定义一个函数,在此函数中调用子组件中的方法
<child ref="childfn"></child> <button @click="parentMethod"></button>
1 <script> 2 import child from './sub-select.vue' 3 export default { 4 components: { child }, 5 data(){ 6 return { 7 8 } 9 }, 10 // onLoad() { 11 // this.$refs.childfn.childMethod() 12 // }, 13 methods:{ 14 parentMethod() { 15 this.$refs.childfn.childMethod() 16 } 17 } 18 } 19 </script>
注意:这里在onload中直接调用子组件中的函数,会报错:Error in onLoad hook: "TypeError: Cannot read properties of undefined (reading 'childMethod')"
四、子组件调用父组件方法
1、
父组件:
<child></child>
1 <script> 2 import child from './sub-select.vue' 3 export default { 4 components: { child }, 5 data(){ 6 return { 7 8 } 9 }, 10 methods:{ 11 parentMethod() { 12 console.log('我是父组件中的方法') 13 } 14 } 15 } 16 </script>
子组件:
<button @click="childMethod()">点击子组件,调用父组件中的方法</button>
1 <script> 2 export default { 3 data(){ 4 return { 5 6 } 7 }, 8 methods:{ 9 childMethod() { 10 console.log(this.$parent) 11 this.$parent.parentMethod(); 12 } 13 } 14 } 15 </script>
2、在子组件里用$emit
向父组件触发一个事件,父组件监听这个事件就行了。
子组件:
<button @click="childMethod">点击子组件,调用父组件中的方法</button>
1 <script> 2 export default { 3 data(){ 4 return { 5 6 } 7 }, 8 methods:{ 9 childMethod() { 10 this.$emit('listenToChildEvent') 11 } 12 } 13 } 14 </script>
父组件:
<child @listenToChildEvent="parentMethod"></child>
1 <script> 2 import child from './sub-select.vue' 3 export default { 4 components: { child }, 5 data(){ 6 return { 7 8 } 9 }, 10 methods:{ 11 parentMethod() { 12 console.log('我是父组件中的方法') 13 } 14 } 15 } 16 </script>
3、将父组件中的方法传入子组件后,在子组件直接调用这个方法
父组件:
<child :parentMethod="parentMethod"></child>
1 <script> 2 import child from './sub-select.vue' 3 export default { 4 components: { child }, 5 data(){ 6 return { 7 8 } 9 }, 10 methods:{ 11 parentMethod() { 12 console.log('我是父组件中的方法') 13 } 14 } 15 } 16 </script>
子组件:
<button @click="childMethod()">父组件方法传入子组件后,子组件中直接调用</button>
1 <script> 2 export default { 3 props: { 4 parentMethod: { 5 type: Function, 6 default: null 7 } 8 }, 9 data(){ 10 return { 11 12 } 13 }, 14 methods:{ 15 childMethod() { 16 this.parentMethod(); 17 } 18 } 19 } 20 </script>