In the first two issues, we briefly learned about the creation and use of local components and global components in Vue . After the component is created, a very important link is communication . There must be a lot of components in a project, and they must be able to communicate with each other to collect data, process data, and transmit data together . In this issue, let's talk about parent-to-child component communication.
Passing from parent to child means that the parent component passes values to the child component.
<div id="app">
<App></App>
</div>
<script>
Vue.component('Child',{
template:`
<div>
<h2>我是子组件</h2>
<p>{
{childData}}</p>
</div>
`,
props: ['childData']
})
const App = {
data () {
return {
msg:'我是父组件传进来的值'
}
},
template:`
<Child :childData = 'msg' ></Child>
`,
methods: {
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
First, we declare a local component App and a global component Child respectively .
We use this global component in the local component, so here is a parent-child component relationship, the son is used, and the father is used .
The core of father-to-child is to use props to pass values.
The main steps:
- Binding custom properties in the parent component
- Declare props in the child component to receive the properties mounted on the parent component
- Use it arbitrarily in the template of the child component
Just like in my example, we used the global component Child in the template of the App component , and bound it with an attribute childData as msg in data .
Then I wrote a property props in the Child component in the form of an array to store the property names that we mounted in the App component . In the example, it is childData .
Then we can in this Child subassemblies in any position to use the passed in value .
No problem, we successfully used the value passed in by the parent component in the child component, and completed the parent-child communication of the component .
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!
