Share example tutorials of vue2.X components

Focus: Communication between parent and child components

Look at the picture and talk:

Pass Props

• The child component itself is isolated from the parent component. It receives the parent component data through the declared props attribute displayed in the child component;

• When the data of the parent component is updated , the props of the subcomponent will be updated accordingly;

• This data flow is one-way (watching);

Emit Events

• The child component uses $.emit(fn) to throw out its own internally triggered events;

• Does the parent component listen? If the parent component needs to listen, use v-on to bind the listener and trigger the corresponding event;

The above is a common language, detailed analysis

• The subcomponent can receive a string, and {{label}} can be used inside the subcomponent

<v-input label="姓名"></v-input>

• Subcomponent can receive dynamic parameters

<input v-model="msg" /><v-profile :message="msg"></v-profile>

What should I do if the subcomponent accidentally changes the data after receiving it and wants to process it?

• Create a copy of the prop (deep copy is recommended), process the copy, and leave the prop unchanged;

After the data of the parent component changes, the child The component's prop will be updated automatically, but the copy of this prop will not?

• Use watch to monitor this prop and update the copy when it changes;

What should I do if I want to notify the parent component if the prop copy of the child component changes?

• Use watch to monitor this copy and throw out its own internally triggered events when it changes;

. . .

Actually the above? ? ? There is a better method in 2.3, just take a look at the previous one.

.sync modifier

***父组件***
<input v-model="msg" />
<v-profile :message.sync="msg"></v-profile>
***子组件***$.emit('update:message',newValue)

I used it and was pleased to see that the modification was successful, but when I opened the console, an error was reported! ! !

vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"

If the child component wants to trigger the parent component, it can emit (the parent component needs to listen to trigger). What about the parent component triggering the child component event?

• By using the ref attribute on the referenced child component, the parent component calls the child component's methods and attributes

But! $refs is only populated after the component is rendered, and it is non-responsive. It is only intended as a workaround for direct access to child components - using $refs in templates or computed properties should be avoided.

Focus: Communication between non-parent-child components

Use an empty vue instance as the central event bus

var bus = new Vue();// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {  // ...})

Consider vuex

Concern: Using slots in components

First of all, it is invalid to place content in the middle of the child component label in the parent component. Then the slot appears.

Vernacular version:

<span style="color: #000000">匿名slot:
    slot标签存在与子组件template中；
    子组件在父组件中使用的时候，子组件标签中的结构会在编译后替换子组件的slot标签；<br>    如果子组件中没有slot，则父组件中子组件标签中的内容会消失；
具名slot:
    顾名思义，是具有name属性的slot标签；并有匿名组件的特性（以上）；
    子组件在父组件中使用的时候，子组件中的结构中会有某些标签拥有slot属性并赋值，这些会在编译后替换子组件的相应slot标签；</span>

One sentence explanation: The main content is written in the sub-component tag in the parent component, and is inserted into the corresponding position of the sub-component after compilation

To be honest, when it comes to this, I don’t even understand why I want to slot.

Official explanation entrance

The official gave an example of layout:

##

<div class="container">
  <header><slot name="header"></slot>
  </header>
  <main><slot></slot>
  </main>
  <footer><slot name="footer"></slot>
  </footer></div>

Copy after login

View Code

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

Copy after login

View Code

<br>

• By using a reserved

  element and dynamically binding to its is attribute, we allow multiple components to use the same A mount point and dynamic switching: very suitable for creating Tab-like effects

<component v-bind:is="currentView" ：data1="data1" :data2="data2">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

<br>

The above is the detailed content of Share example tutorials of vue2.X components. For more information, please follow other related articles on the PHP Chinese website!