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

This article mainly explains "how to customize the value of components in vue", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to customize components in vue" bar!

Custom components pass values

Conventional prop-event

Parent component

Import propEventValue from'. / components/prop-event-value.vue'export default {name: 'app', components: {propEventValue}, data () {return {address:'}

Sub-component

Prop-event

Address export default {name: 'prop-event', props: [' address'], data () {return {tempAddress: this.address}}, watch: {tempAddress (newVal) {this.$emit ('update', newVal)}

Note: do not manipulate the contents of the parent component directly within the child component

The scope of the component instance is isolated. Each time the parent component is updated, all prop of the child component is updated to the latest value. This means that the data of the parent component cannot (and should not) be referenced directly within the template of the child component. If you do, Vue will give you a warning on the console.

Export default {name: 'prop-event', props: [' address'], watch: {address (newVal) {this.$emit ('update', newVal)}

If the above code is replaced by a subcomponent, the content will report an error!

Modifier. Sync

Parent component

Import mySyncValue from'. / components/my-sync-value.vue'export default {name: 'app', components: {mySyncValue}, data () {return {address:'}

Sub-component

My-sync

Address export default {name: 'my-sync', props: [' address'], data () {return {tempAddress: this.address}}, watch: {tempAddress (newVal) {/ / must be this update:address this.$emit ('update:address', newVal)}

Prop-update: [prop] grammatical sugar, advantage over prop-event: the parent component does not need to listen to the event @ update= "val = > address = val", and automatically listens for update: [Prop] events.

Bidirectional data binding v-model

So for the component's v-model to take effect, it should be (configurable from 2.2.0):

Accept a value prop

Triggers the input event when there is a new value and takes the new value as a parameter

Parent component

Import myVmodelValue from'. / components/my-vmodel-value.vue'export default {name: 'app', components: {myVmodelValue}, data () {return {address:'}

Sub-component

My-vmodel

Name export default {name: 'my-vmodel', props: [' value'], data () {return {tempAddress: this.value}}, watch: {tempAddress (newVal) {/ / must be input this.$emit ('input', newVal)}

Prop-input syntax sugar. The parent component v-model listens for input events by default.

It should be noted that the input event must be triggered here. Of course, you can also customize the value and event of the v-model attribute. Please refer to the v-model of the custom component.

Vuex

Pass a value through store, and here we will talk about vuex separately.

Unidirectional data flow

As mentioned above, changing the prop,Vue within the subcomponent will give an alarm on the console. But often developed by Zhou Jing, we can't help but modify the data in prop, such as:

When Prop is passed in as an initial value, the subcomponent wants to use it as local data

Prop is passed in as raw data and processed by sub-components into other data output.

The correct way to deal with these two situations is:

Problem 1: define a local variable and initialize it with the value of prop:

Props: ['initialCounter'], data: function () {return {counter: this.initialCounter}}

Question 2: define a calculation property, process the value of prop and return:

Props: ['size'], computed: {normalizedSize: function () {return this.size.trim (). ToLowerCase ()} Thank you for your reading. The above is the content of "how to customize the component value in vue". After the study of this article, I believe you have a deeper understanding of how to customize the component value in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.