The child of a component value is passed to the parent
A child component passes a value to its parent using the $emit attribute, which means to emit something. Parameter 1: the name of the event emitted, parameter 2: the parameter of the event passed
<div id="app">
<h1>Father - > {{father}}</h1>
<son @fire='shou'></son>
</div>
Vue.component('son', {
template: '< h@click ='fire'> child --> I am a child component '.data() {
return {
sonmse: 'Hello.'}},methods: {
fire(value) {
this.$emit('fire'.this.sonmse)
}
},
})
const app = new Vue({
el: '#app'.data: {
father: 'I am the parent component information'
},
methods: {
shou(value) {
this.father = value
}
}
});
Copy the codeNon-parent transmission value
We sometimes have to define an empty Vue instance and delegate the empty Vue instance to send the message. The arguments in $emit are the same as those in the parent.
<div id="app">
<first></first>
<second></second>
</div>
<script>
// Define an empty Vue instance object
let kVue = new Vue()
Vue.component('first', {
template: ' I am first
'.data() {
return {
firstMse: 'I am the first message'}},methods: {
pass() {
kVue.$emit('fire'.this.firstMse)
}
},
})
Vue.component('second', {
template: ' I am second {{mes}}
'.data() {
return {
mes: ' '}},mounted() {
kVue.$on('fire'.(value) = > {
this.mes = value
})
},
})
</script>
Copy the codeslot
After defining components, data cannot be written between components. If you want to write data, you need slots to insert this information into the component. A named slot is a name for a slot. In order to keep the information of different components unique, we can give a name to the slot, and then write the named slot in the location you want.
<div id="app">
<first>
<span slot="A">It's a nice day today</span>
<span slot='B'>Let me see if you've been nice today</span>
<span>ahil1</span>
</first>
</div>
<template id="first">
<div>
<h1>1 <slot name='A'></slot>
</h1>
<h1>2 <slot name='B'></slot>
</h1>
<h1>3 <slot name='A'></slot>
</h1>
</div>
</template>
Vue.component('first', {
template: '#first'
})
Copy the codeVue lifecycle hook functions
Vue2.0 website shows 11 Vue lifecycle hook functions.
beforeCreate() {
console.log('Is called after instance initialization and before the Event/Watcher event configuration. Call 'before component creation);
},
created() {
console.log('Called immediately after instance creation but not yet available for el');
// console.log(this.$el);
},
beforeMount() {
console.log('Called before mount begins: the relevant render function is called for the first time');
// console.log(this.$rednder);
},
mounted() {
console.log('Called after content has been mounted, this is the most common periodic function that EL has been mounted.')
// console.log(this.$el);
},
beforeUpdate() {
console.log('Called when data is updated');
},
updated() {
console.log('Called after component DOM has been updated');
},
beforeDestroy() {
console.log('before instance destruction. At this step, the instance is still fully available. ');
},
destroyed() {
console.log('called after instance destruction. When this hook is called, all instructions for the Vue instance are unbound, all event listeners are removed, and all subinstances are destroyed.);
},
Copy the codeCustom instruction
A global directive uses vue.directive (), the first of which is the name of the directive, and the second is an object that contains the INSERTED property
Vue.directive('bg', {
// Inserted The lifetime of the insert instruction executes the equivalent of MonuTED when the instruction is first called
// Parameter 1: the label to which the instruction is mounted
// Parameter 2: data object
inserted(el, data) {
console.log(el);
console.log(data);
console.log(data.value);
el.style.background = data.value
}
})
Copy the codeLocal instructions are written in Vue instances
const app = new Vue({
el: '#app'.data: {},
directives: {
color: {
inserted(el, data) {
el.style.color = data.value
}
}
}
});
Copy the codeMixed with
When we write components, we may encounter many components that have the same function. This is to use mixin to define the same function, which can reduce a lot of repetitive code.
<div id="app">
<first></first>
<second></second>
</div>
<template id="first">
<div>
<h1 @click='myClick'>Click me to get the latest time</h1>
<h1 @click='clickDown'>Am I</h1>
</div>
</template>
<script>
let time = {
methods: {
myClick() {
alert(new Date()}}},let lifeCircle = {
beforeCreate() {
console.log('Component created')
},
}
Vue.component('first', {
template: '#first'.mixins: [time, lifeCircle],
methods: {
clickDown() {
console.log('Broken after the New Year')},myClick() {
console.log('aaa')
}
},
})
Vue.component('second', {
template: '< h@click ='myClick'> click me '.mixins: [time]
})
Copy the codeVerify that the value is passed from father to child
When communicating from parent to child, we use props properties to receive information from the parent. Before the pillow, we use arrays, but Vue officially recommends that we use object forms. We can specify validation requirements for component prop, such as the types you know. If a requirement is not met, Vue will warn you in the browser console. This is especially helpful when developing a component that will be used by others.
props: {
mes: {
type: String
},
age: {
type: Number
},
font: {
type: String.default: 'Always happy'}}Copy the codeElements to find
We don’t need to manipulate the DOM tree directly in Vue, after we bind ref we can get this property directly with $refs.
<div id="app">
<h1 ref='bg'>hello</h1>
<h1 ref='color'>We learn</h1>
<h1 ref="a">ss</h1>
</div>
<script>
const app = new Vue({
el: '#app'.data: {},
methods: {},
mounted() {
this.$refs.bg.style.color = 'red'
this.$refs.color.style.background = 'orange'
this.$refs.a.style.color = 'green'}});</script>
Copy the code