vue组件间传值分为父组件给子组件传值和子组件给父组件传值
一、父组件给子组件传值
父组件中引入子组件,父组件的js里定义要传递的属性值,下面的写法是动态的传递,name可以通过定义方法,在方法里动态修改,如不需要动态的传递,则直接使用属性定义值
parent.vue
<template>
<child v-bind:name="name"></child>
</template>
<script>
import child from "./child.vue"
export default {
components: {child},
data(){
return {name:"张三"}
}
}
</script>
子组件定义props接收父组件传递的值,如下:
child.vue
<template>
<div>{{name}}</div>
</template>
<script>
export default {
props:["name"]
}
</script>
二、子组件给父组件传值
首先在父组件中引入子组件,定义一个方法接收子组件传递的值,如果只需要知道子组件完成某项操作,可以不传值,只定义方法,如下(子组件给父组件传值):
parent.vue
<template>
<child @childToParent="child"></child>
</template>
<script>
import child from "./child.vue"
export default {
components: {child},
methods:{
child(data){
console.log(data);
}
}
}
</script>
在子组件中定义一个方法,传值给父组件,如下:
child.vue
<template>
<button @click="childClick">点击</button>
</template>
<script>
export default {
methods:{
childClick(){
this.$emit("childToParent","I am child.");
}
}
}
</script>
三、父组件调用子组件方法
先在子组件里定义好方法,在父组件里引入子组件后,在使用子组件时,绑定一个ref,这样就可以实现父组件调用子组件的方法
parent.vue
<template>
<child ref="child"></child>
<button @click="click">click</button>
</template>
<script>
import child from "./child.vue"
export default {
components: {child},
methods:{
click(){
this.$refs.child.init();
}
}
}
</script>
child.vue
<template>
<p>{{name}}</p>
</template>
<script>
export default {
data(){
return {
name:''
}
}
methods:{
init(){
this.name="jack";
}
}
}
</script>