vue子组件与父组件互相传值及调用方法

爱被打了一巴掌 2022-09-06 00:19 153阅读 0赞

**子组件**

<template id="com1">
    		<div>
    			<h1 v-if="idx==1">com1的私有内容</h1>
    			<input type="button" @click='myclick'   value='点击触发' />
    		</div>
    	</template>

**父组件**

<div id="app1">
    			<button @click='fuclick'>调用子组件方法</button>
    			<p>this.$refs.zifun.myclick();</p>
    			<p>this.$children</p>
    			<com1 v-on:tyclick='show' :idx='idx'   ref="zifun"></com1>
    		</div>

**子组件向父组件传值及调用方法：**  
***this.$emit(‘方法’，‘参数1’,‘参数2’);***  
子组件

Vue.component('com1', {
    			//1.使用 $on(eventName)监听事件
    			template: '#com1',
    			methods: {
    				//子组件的自定义事件  
    				myclick: function() {
    					this.$emit('tyclick','我是子组件');
    				}
    			},
    		})

父组件

data(){
    	return{
    			idx:2,
    			nsd:''
    		}
    },
    	methods: {
    	  // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
    		show(val) { 
    			console.log(val)
    			this.nsd=val //参数赋值
    		},	
    	}

**父组件向子组件传值：**  
***props***

Vue.component('com1', {
    	props: ['idx'],		
    },

<com1  :idx='idx'></com1>
    
    var vm = new Vue({
    			el: '#app1',
    			data(){
    				return{
    					idx:2,
    				}
                 }
    }

**父组件调用子组件的方法：**

**this.$refs**（获取指定子组件）

**this.$children**（获取所有此父组件中的所有子组件）

<com1 v-on:tyclick='show'  ref="zifun"></com1>
    
    fuclick(){
    	    this.$refs.zifun.myclick();
    		this.$children[0].myclick()
    	}

完整代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="app1">
    			<button @click='fuclick'>调用子组件方法</button>
    			<p>this.$refs.zifun.myclick();</p>
    			<p>this.$children</p>
    			<com1 v-on:tyclick='show' :idx='idx'   ref="zifun"></com1>
    		</div>
    	</body>
    	<template id="com1">
    		<div>
    			<h1 v-if="idx==1">com1的私有内容</h1>
    			<input type="button" @click='myclick'   value='点击触发' />
    		</div>
    	</template>
    	<script>
    		//创建私有组件
    		Vue.component('com1', {
    			//1.使用 $on(eventName)监听事件
    			template: '#com1',
    			props: ['idx'],
    			data: function() {
    				return {
    					
    				}
    			},
    			methods: {
    				//子组件的自定义事件  
    				myclick: function() {
    					this.$emit('tyclick','我是子组件');
    				},
    				nish(){
    					console.log('ss')
    				}
    			},
    		})
    
    		// 创建 Vue 实例，得到 ViewModel
    		var vm = new Vue({
    			el: '#app1',
    			data(){
    				return{
    					idx:2,
    					nsd:''
    				}
    			},
    			methods: {
    				show(val) { // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
    					console.log(val)
    				},
    				fuclick(){
    					this.$refs.zifun.myclick();
    					//1.父组件调用子组件方法
    					//2.父组件调用子组件方法
    					this.$children[0].nish()
    				}
    			}
    		});
    	</script>
    </html>

学习间，在此记录 ~