Several ways of component communication
Pass value from parent component to child component
In the parent component, the custom component is used to pass the value, and the custom attribute is written to the tag where the parent component calls the child component. Use props in the subcomponent to receive, props is written to the subcomponent at the same level as data, props is an array, and the content is the name of the custom attribute.
Passing values from child components to parent components
The child component passes the value to the parent component using the publish subscriber mode. In the child component, use this.$emit to publish a custom event and receive two parameters. The first parameter is the event name of the custom event, and the second The parameter is the value to be passed. Use @custom event name = "callback function" in the label of the parent component calling the child component, and several data are passed in the callback function, and several parameters are used to receive it.
vuex (detailed in the next part)
Parent component calls method in child component
Method 1:
In the label of the parent component calling the child component, directly call the method in the child component through ref, ref is equal to a variable such as childChange, and use this.$refs.childChange. The method in the child component in the method of the parent component to accomplish.
//父组件中
<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="childChange"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.childChange.sing();
},
},
}
</script>
//子组件中
<template>
<div>我是子组件</div>
</template>
<script>
export default {
methods: {
sing() {
console.log('子组件的方法');
},
},
};
</script>
Method 2:
through the component's emit, emit,e mi t , on method to achieve
//父组件中
<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.child.$emit("childmethod") //子组件$on中的名字
},
},
}
</script>
//子组件中
<template>
<div>我是子组件</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods', function() {
console.log('子组件的方法');
});
});
},
};
</script>
The child component calls the method of the parent component
Method 1:
Call the method of the parent component directly in the child component through this.$parent.event
//父组件中
<template>
<div>
<Child></Child>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
fatherMethod() {
console.log('父组件中的方法');
},
},
}
</script>
//子组件中
<template>
<div>
<Button @click="childMethod">子组件调用父组件中的方法</Button>
</div>
</template>
<script>
export default {
mounted() {
childMethod() {
this.$parent.fatherMethod();
}
},
};
</script>
Method 2:
Use $emit in the child component to trigger an event to the parent component, and the parent component just listens to the event.
//父组件中
<template>
<div>
<Child @fatherMethod="fatherMethod"></Child>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
fatherMethod() {
console.log('父组件中的方法');
},
},
}
</script>
//子组件中
<template>
<div>
<Button @click="childMethod">子组件调用父组件中的方法</Button>
</div>
</template>
<script>
export default {
mounted() {
childMethod() {
this.$emit('fatherMethod');
}
},
};
</script>
Method 3:
The parent component passes the method to the child component, and calls this method directly in the child component
//父组件中
<template>
<div>
<Child @fatherMethod="fatherMethod"></Child>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
fatherMethod() {
console.log('父组件中的方法');
},
},
}
</script>
//子组件中
<template>
<div>
<Button @click="childMethod">子组件调用父组件中的方法</Button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
mounted() {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
},
};
</script>