In the last issue, we talked about component communication , and explained in detail the parent-to-child component communication .
Since there is a parent component to pass a value to a child component , there must be a child component to pass a value to the parent component .
In this issue, we will talk about the child-to-parent in component communication .
<div id="app">
<App></App>
</div>
<script>
Vue.component('Child',{
template:`
<div>
<h2>我是子组件</h2>
<input type="text" @input="handleInput" />
</div>
`,
methods:{
handleInput(event){
const val = event.target.value;
this.$emit('inputHandler',val);
}
}
})
const App = {
data () {
return {
newVal:''
}
},
template:`
<div>
数据：{
{newVal}}
<Child @inputHandler = 'input' ></Child>
</div>
`,
methods: {
input(newVal){
this.newVal = newVal
}
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
By convention, we still wrote a global component Child and a local component App .
Because we use the Child component in the App component , there is a relationship between parent and child components .
The process of passing from son to father:
- First bind a custom event on the child component used in the parent component
- Then bind the native event in the child component, in the event function, trigger a custom event through this.$emit
The explanation may be a little convoluted, look at the sample code I posted.
Looking at the App component first , we wrote a div with a newVal bound to it to display the value passed in from the child component , and used the Child component. For this child component, we wrote a custom event @inputHandler ='input' , and then define this input event in methods, let it assign the value from the child component to newVal, and display it .
Look at the Child component . This component only writes an input input box , collects our input , and binds a **@input ='handleInput'** event that we are all familiar with, and then we are the most critical In this handleInput , we must first get the content val we input like normal operation , and then pass it to the parent component through this.$emit . The first parameter is the name of the event we customized in the parent component. inputHandler , the second parameter is the value we want to pass out .
This is the whole process. I think I have already explained it in detail. If you have any questions, you can add me to QQ to communicate!
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
