父子组件传值的方法_vue什么是父子组件「建议收藏」

父子组件传值的方法_vue什么是父子组件「建议收藏」一、父组件向子组件传值父组件:<child:inputName="name"></child>1<script>2importchildfrom'./sub-select.vue';3exportdef

大家好,欢迎来到IT知识分享网。

 一、父组件向子组件传值

父组件:

<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>

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/29698.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信