vue父子组件传参（子组件调用父组件方法，父组件调用子组件方法或属性，子组件修改prop值）
目录
- 一、父组件向子组件传递参数
- 二、vue子组件调用父组件的方法
- 三、vue父组件调用子组件方法或属性
- 四、vue子组件修改prop值
-
-
- 1、通过父传子，子调用父方法传参数实现
- 2、通过.sync修饰符以及$emit配合update:实现，该方法只有vue2可以使用
- 3、使用v-modal绑定一个数据源
-
一、父组件向子组件传递参数
父组件通过在子组件的标签上使用v-bind或简写的:语法，将父组件的parentMessage作为message的值传递给子组件。子组件通过定义props接收传递的参数，并在模板中渲染该参数的值。
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent component',
};
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>
二、vue子组件调用父组件的方法
子组件通过按钮的点击事件@click来调用triggerEvent方法，在该方法中使用this.$emit触发了名称为child-event的自定义事件。
在父组件中，使用@child-event绑定父组件的parentMethod方法来监听子组件触发的自定义事件。
在子组件的emit事件中，可以传递额外的参数，供父组件的方法使用。例如：this.$emit('child-event', data)，其中data是传递的参数，父组件的方法可以通过监听事件时的回调函数接收这些参数。
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent @child-event="parentMethod" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
parentMethod() {
console.log('Method called from child component');
},
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<button @click="triggerEvent">触发父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
// 不带参
this.$emit('child-event'); // 触发父组件的自定义事件
// 带参
this.$emit('child-event'， '222'); // 触发父组件的自定义事件
},
},
};
</script>
三、vue父组件调用子组件方法或属性
在Vue中，父组件可以通过ref引用子组件，并通过该引用调用子组件的方法或访问子组件的属性。
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent ref="childComponentRef" />
<button @click="callChildMethod">调用子组件方法</button>
<p>{{ childComponentMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
childComponentMessage: '',
};
},
methods: {
callChildMethod() {
this.$refs.childComponentRef.childMethod(); // 调用子组件的方法
this.childComponentMessage = this.$refs.childComponentRef.childProperty; // 访问子组件的属性
},
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default {
data() {
return {
childProperty: 'Message from child component',
};
},
methods: {
childMethod() {
console.log('Method called from parent component');
},
},
};
</script>
四、vue子组件修改prop值
1、通过父传子，子调用父方法传参数实现
<!-- 父组件 -->
<template>
<child-view :num="num" @updateNum="updateNum"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {childView},
data() {
return {
num: 2
}
},
methods: {
updateNum(num){
this.num = num
}
}
</script>
<!-- 子组件 -->
<<template>
<div>
<p>父传过来的值：{{num}}</p>
<button @click="changeNum">加一</button>
</div>
</template>
<script>
export default {
name: 'child',
props:{
num: {
type:Number,
default: 0
}
},
methods:{
changeNum(){
this.$emit("updateNum",this.num + 1)
}
}
}
2、通过.sync修饰符以及$emit配合update:实现，该方法只有vue2可以使用
<!-- 父组件 -->
<template>
<child-view :num.sync="num"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {childView},
data() {
return {
num: 2
}
}
}
</script>
<template>
<div>
<p>父传过来的值：{{num}}</p>
<button @click="changeNum">加一</button>
</div>
</template>
<script>
export default {
name: 'child',
props:{
num: {
type:Number,
default: 0
}
},
methods:{
changeNum(){
this.$emit("update:num",this.num + 1)
}
}
}
</script>
3、使用v-modal绑定一个数据源
<!-- 父组件 -->
<template>
<child-view v-modal="num"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {childView},
data() {
return {
num: 2
}
}
}
</script>
<template>
<div>
<p>父传过来的值：{{num}}</p>
<input type="text" :value="value" @input="$emit('input',$event.target.value)">
</div>
</template>
<script>
export default {
name: 'child',
props:["value"]
}
</script>