Summary of various roles in the vue component
In Vue, components are the main content of modular development, and components' communication is the soul of vue data-driven. Here are the following summaries of the four main situations:
Use props to pass data----inside component
//html
<div >
<i>Pay attention to naming regulations：Only inhtmlUse internallymy-message</i>
<child my-message="Component Internal Data Transfer"></child>
</div>
//js
<script>
('child', {
props: ['myMessage'],
template: '<mark>{{ myMessage }}<mark/>'
});
new Vue({
el: '#app1'
})
</script>
Dynamic props communication---component and root node (between parent and child)
<div >
<input v-model="parentMsg">
<br>
<child :parent-msg="parentMsg"></child>
</div>
<script>
('child', {
props: ['parentMsg'],
template: '<mark>{{ parentMsg }}<mark/>'
});
new Vue({
el: '#app2',
data: {
parentMsg: 'msg from parent!'
}
})
</script>
Comparative analysis:
Example 1:
<comp some-prop="1"></comp> //Internal data transfer of components，Corresponding literal syntax:Passed a string"1"
Example 2:
<comp v-bind:some-prop="1"></comp> //Component and root node data delivery，Corresponding dynamic syntax:Pass the actual number:jsexpression
Features of one-way data flow: When the parent component's attributes change, it will be transmitted to the child component, otherwise it cannot
Two different prop changes
Note that in JavaScript objects and arrays are reference types, pointing to the same memory space. If prop is an object or array, changing it inside the child component will affect the state of the parent component.
//Define a local data attribute and use the initial value of prop as the initial value of local dataprops: ['initialCounter'],
data: function () {
return { counter: }
}
//Define a local computed property, which is calculated from the value of prop props: ['size'],
computed: {
normalizedSize: function () {
return ().toLowerCase()
}
}
Subcomponent index
Despite props and events, sometimes it is still necessary to access the child components directly in JavaScript. For this purpose, you can use ref to specify an index ID for the child component.
<div >
<!-- vm.$ will be the DOM node -->
<b ref="p">hello</b>
<!-- vm.$ will be the child comp instance -->
<user-profile v-for='i in 3' ref="profile"></user-profile>
</div>
<script>
var userPf=('user-profile',{
template:'<div>hello $refs</div>'
});
var parent = new Vue({ el: '#parent' });
// Access subcomponentsvar child = parent.$;
(child[0]);
(parent.$);
</script>
$refs is only populated after component rendering is complete, and it is non-responsive. It is merely a contingency solution for direct access to subcomponents—the use of $refs should be avoided in templates or computed properties.
Data reverse transmission---custom events
The foundation of custom events is that each vue instance implements an Event interface.
Vue's event system is separated from the browser's EventTarget API. Although they run similarly, $on and $emit are not alias for addEventListener and dispatchEvent .
The parent component can directly use v-on to listen for events triggered by the child component where the child component is used.
- Listening: $on(eventName)
- Trigger: $emit(eventName)
<div >
<p>Look at the parent's data: <mark>{{t}}</mark> & the child's data: <mark>{{childWords}}</mark></p>
<child v-on:add="pChange"></child>
<child v-on:add="pChange"></child>
<child v-on:="native"></child>
</div>
<script>
('child', {
template: `<button @click="add">{{ c }}</button>`,
data: function () {
return {
c: 0,
msg: 'I am from child\'s data'
}
},
methods: {
add: function () {
+= 1;
this.$emit('add',);
}
},
});
new Vue({
el: '#app3',
data: {
t: 0,
childWords: ''
},
methods: {
pChange: function (msg) {
+= 1;
=msg;
},
native:function () {
alert('I am a native event ,which comes from the root element！');
}
}
})
</script>
Communication between brothers--bus is used for simple scenarios, vuex is used for complex scenarios
<div >
<display></display>
<increment></increment>
</div>
<script>
var bus = new Vue();
('increment', {
template: `<button @click="add">+</button>`,
data: function () {
return {count: 0}
},
methods: {
add: function () {
bus.$emit('inc', +=1)
}
}
});
('display', {
template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
data: function () {
return {c: 0}
},
created: function () {
var self=this;
// bus.$on('inc', function (num) {
// = num
// });
bus.$on('inc', (num) =>
= num
);
}
});
vm = new Vue({
el: "#app4",
})
</script>
Summary: In Vue, communication between components and between components and root nodes can be artificially communicated between father and son. In addition, the father-son relationship is relative, that is, related to the context (for example, the parent component of component A may be a child component of component B); the above four examples demonstrate the mechanism of communication between different components.
It is not difficult to resolve this sentence after clarifying the above issues:
Compile scope--The content of the parent component template is compiled within the parent component scope; the content of the child component template is compiled within the child component scope. The distribution content is compiled within the scope of the parent component
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.