“This is the 12th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.
Vue parent and child components
What are parent-child components? In a component into another component, is called a child components was introduced, because of the vue modular, will the public part of smoke alone into a module, don’t write all page content under a vue file, because the cause of the modular, avoid the problem of communication between the two modules, then there will be a modules (components) between the data transmission problem
Vue parent-child component communication
In VUE, it is common for one component to use the data or methods of the other, and there is a communication problem between parent and child components
Vue father the son
1. Look at the code first, explained below
The < body > / / parent component < div id = "app" > < cpn3: ctitle = "title" > < / cpn3 > < / div > / / subcomponents < template id = "cpn3" > < div > < h1 > {{ctitle}} < / h1 > < p > orange < / p > < / div > < / template > < script SRC = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" > < / script > < script > / / child component Vue.component_props ("cpn3", {template: "#cpn3", // The data in the component is a function that must return an object. The variables in the object must be props: {ctitle: {type: String, default () {return {}}}}}) // Parent component const app = new Vue({el: "#app", data: {title: 'orange'}, methods: {}, }) </script> </body>Copy the code
Explain: 1. Write the basic template separation component first
Add the props property to the sub component, and in the props, you can write the parameters you need to pass, and in the parameter, you can also use the object method.
/ / subcomponents Vue.com ponent (" cpn3 ", {template: "# cpn3", / / the data in the component is a function, must want to return an object, variable write in return objects props: {ctitle: Type: String, default () {return {}}}}})Copy the code
2. Then add the required properties to the parent component
// Const app = new Vue({el: "#app", data: {title: 'orange'}, methods: {},})Copy the code
3. Bind two parameters in the parent component
<cpn3 :ctitle="title"></cpn3> </div>Copy the code
4. Finally, use the property names defined by the child components
// Subcomponent <template id="cpn3"> <div> // The property here is ctitle <h1>{{ctitle}}</h1> </div> </template>Copy the code
Vue son father
1. Child to parent means that, the content of the child component is passed to the parent component, so that the parent component can use the data from the child component at any time, using the method: custom function
1. First of all, let’s make a fake Taobao sidebar product. Click or move the mouse to the above content product case
2. Using the image above as an example, let’s look at the child passing of the component
2.1 Let’s separate the child component from the parent component and look at the child component code one by one
<! - child components - > < template id = "CPN" > < div > < h1 > {{ctitle}} < / h1 > < button v - for = "item in the list" @click="goodsclick(item)">{{item.name}}</button> </div> </template> <script> Vue.component("cpn", { template: '# CPN ', // parent props: {ctitle: {type: String, // default () {return {}}}}, data() {return {list: [{id: 'phone, name:' mobile phones'}, {id: 'TV, name:' TV '}, {id: 'p', name: 'home appliances'}, {id:' computer 'name: $emit('itemclick', item) {$emit('itemclick', item)}}) </script>Copy the code
A child component is a component (HTML) that is written and wrapped up and ready to use, just like HTML, but wrapped up.
1. The subcomponents have the same properties as vue, data methods, so write an array in data, and then use v-for to iterate over the generated button, which is no different from normal writing. Then write a function, bind the click event, and pass item, which is the object passed in the array, to the function.
<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
Copy the code
2. Then the most important and crucial step is to send a custom function to the parent component in the click event function you bind
$emit('itemclick', item) {$emit('itemclick', item)}}Copy the code
This is the child component done, and this is what the child component looks like, as shown above
2. How does the parent receive custom events from the child
<! <div id="app"> < CPN :ctitle="title" @itemClick ="cpnclick"></ CPN ></ div> <script> el: "#app", data: { title: "title", }, methods: { cpnclick(item) { console.log("cpnclick", item); } } }) </script>Copy the code
When you write a subcomponent, you need to call it. The call is your component name as a label
<cpn :ctitle="title" @itemclick="cpnclick"></cpn>
Copy the code
Write a function in the parent component and bind the custom event in it from the child component, thus successfully binding the child component, so that the child component passes data to the parent component