Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to obtain the content of the parent component". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

How a child component gets the content props property of the parent component

The scope of the component instance is isolated. This means that the data of the parent component cannot and should not be referenced directly within the template of the child component. You can use props to pass data to subcomponents.

To reference the parent component, you need:

/ / the child component binds the data msg of the parent component to the myMsg bbb: {props: {'myMsg':String / / Type of bound data}}

Note: props can also be expressed as follows: props: ['myMsg']

A complete example is as follows:

{{msg}} / / parent component / / child component _ window.onload=function () {new Vue ({el:'# example', data: {} Components: {aaa: {data:function () {return {msg:' I am the data of the parent component'}}, template:'#aaa' Components: {bbb: {props: {'myMsg':String} Template:' I am a subcomponent-- > {{myMsg}}'} / / when using my-msg in html In js, you need to use hump naming myMsg}})}

The final result is shown in the following figure:

Vue parent → child component props passing value requirement 1

If you want to pass the value in the custom attribute to the template, you can use the props attribute:

Points for attention in writing:

Case of 1.props: for dash naming in html, use small hump naming in vue (introduction to large hump naming: the first letter is also capitalized)

There must be a root directory in 2.template:

Demand 2

In actual projects, we often pass the values in data to the template, as follows:

Idea: use v-bind and data data binding to pass values to the interpolation in the component's template.

Another case:

Effect picture:

Summary of the process of delivery: prepare a large component (in the vue instance) and a child component son, use v-bind to bind the message property to be passed in the son child component, and the message attribute value is the data value in the corresponding parent component. Then add a props property (the emphasis is this props property, which is used to receive the value of the parent component) in the object of the second parameter of the son child component component method, and the value is an array. Fill in the message in the form of a string, and finally use the message directly in the template of the subcomponent.

At the same time, you also need to solve the child components and synchronously modify the values of the parent and child components, as follows:

The procedure for a child component to modify the value of a parent-child component:

Define a modified method in the child component, add the this.$emit () method in the method, it has two parameters, the first is the custom event name, and the second is the value to be modified, then add the custom event in the parent component with v-on, the value writes the parent component method, in this method (US dollar event) as a parameter, receive and operate the logical operation you want to modify in the parent component method.

This is the end of the content of "how to get the content of the parent component by the vue child component". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.