This is the second day of my participation in Gwen Challenge

Vue2 Componentized development of Vue2

The treasure knife is still old, Vue2 component development

To summarize this phase of the knowledge, is comparatively mature vue3 actually, using vue3 development project, is really silky smooth ~, but is still in many enterprise project application vue2, only a few new project will adopt vue3 to development, and many still use vue2 to develop new project, after all, perfect ecological components, So the vue2 knowledge point series is called “baodao is still old”, but ah technology field is like this, there is no sharp baodao, only continuous business ~, not old now, but will eventually be old! Kind of sad, isn’t it? Roll it up, boy. This series does not talk about special basic things, basic not to see the VUe2 document, I do not want to copy

1. Parameter transmission mode of Vue2 components

  • Nonboundary case

    1. props
    2. $emit/$on
    3. event bus
    4. vuex

  • Edge cases

    1. $parent,$children,$root,$refs(Usually cooperate$emit/$on)
    2. provide/inject
    3. $attrsIf the child component does not declare props and the parent component gives the child component an attribute value, for example:<test-child :test="' I am a child component '"></test-child>, the child component gets the property value throughthis.$attrs.testTo obtain
    4. $listenersTo understand the$attrsThat corresponds to the property, actually$listenerThat corresponds to the method

I’m just going to focus on a couple of things that are important one is the Event bus and one is the boundary case

1.1 event bus

$bus = new Vue(); $bus = new Vue(); Why is it possible to create a bus like this? New Vue() is the largest Vue component instantiated and has the $emit and $ON properties

The general usage is as follows:

// main.js
Vue.prototype.$bus = new Vue();
Copy the code
// Component A registers A method on $bus
this.$bus.$emit('testEmit'.'I took the bus.')
Copy the code
// Component B wants $bus to listen for component A to register A method
created(){
    this.$bus.$on('testEmit'.(value) = >{
        console.log( value ,'Received')})}Copy the code

In this way, a communication between components at any level can be achieved

1.2 $parent

Using $parent to communicate with data is similar to using event bus because it takes the parent instance, if the current instance has one

Such as:

// Sibling A
mounted(){
	this.$parent.$emit('sendMsg'.'I'm sending a message')}Copy the code
// Sibling component B
created(){
	this.$parent.$on('sendMsg'.(value) = >{
		console.log(value,'I got a message from brother A.')})}Copy the code

1.3 $root

$parent = $root; $parent = $bus

1.4 $refs

If it’s bound to a vue component, it’s an instance of a vue component, and you can get the instance of that component, and you can get the methods, data, and so on, and you can print that out console.dir(). Of course, if it’s bound to a native DOM element, So you get the native DOM element.

1.3 $children

In fact, this boundary is used much, much less than the one above. This is an array of elements that can be retrieved from subcomponent instances of the component. Crucially, the order of the child elements in $children is not guaranteed

1.5 provide/inject

Parameter transfer across hierarchies

In fact, this thing is also very useful, ancestor to child elements to pass values is much easier

See the following code for details:

// Ancestor element.data(){
	return{
		reactive: {num:0}}},provide(){
    return{
        test:'into'.reactive:this.reactive
    }
}
...
Copy the code
/ / child elements.inject: {// similar to props
    testOne: {from:'test'.default: {num:0}},reactive: {from:'reactive'}}...Copy the code

Provide a responsive reference type variable. The value inside the reference type changes. The value inside the child element is also responsive, and the value inside will change synchronously

2. Realization of V-model of VUE component

This part is actually quite easy, just because we usually do business and rarely use it,

V-model steps for customizing components:

  1. Add the Model property to the custom component, specifying the bound property and the event name to distribute
  2. The component then writes the properties specified by model and distributes the events and completes the v-model of the component
.model: {prop: 'show'.event: 'change'
},
methods: {
    closeEvent(){
        this.$emit('change'.false)}}...Copy the code

3. Message implementation idea of vue

Let’s take a look at the message implementation and see what we can learn. (The easiest way to do this is to refer to the Element-UI implementation.) Actually, if you have an idea, you can go to the Element website first to see the message function, and here is the core

  1. Direct use ofthis.$message[type], can be called
  2. The Message node is inserted above the body

$message = message; $message = message; $message = message

The second is easily solved by creating a message template and then using vue.extend to create a “subclass” called instanceClass. Const instance = new instanceClass.$mount() to get an instance of the subclass.$el to get the actual DOM element of the instance. The final document. The body. The appendChild (instance. $el);

The above two steps perfectly solve the core steps of message implementation, and the rest of the details are left to the reader to figure out