一、父组件向子组件传值
父组件：
<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>
今天的文章Vue完成的父子传值的例子_父组件给子组件传值方法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/45193.html
