Analysis of the use of vue function @

Use of @

Background: When you encounter @ function during the operation of the vue project, the scene is special (the project has a component library that is encapsulated by itself, so all styles are integrated uniformly. When you want to introduce special UI style processing in special cases, some components need to re-tune the style, so @ is used).

What is the function of @?

Note: @ is a built-in function of vue. There are many other functions in vue that also have rich application scenarios. This blog post has been thinking about it over and over again, and only explains @. For understanding other functions, you can check the relevant information by yourself.

Solution: The @ function will block the original event that triggers the dom and execute a specific event.

To better understand the @ function, a sample of usage in a project is introduced for reference:

&lt;!-- Sample --&gt;
  // Codding...
  &lt;a class="img-control" v-show="true" @="goXxxx()"&gt;Revise&lt;/a&gt;
&lt;!-- 
    Analysis：
        aThe tag has its own by defaulthrefproperty，triggeraAfter tagging, it will automatically jump to the corresponding link address or executed function.。
        For nesting here，Avoid adjusting styles so referencedaTags to handle，But to avoida标签的property限制，Therefore, the quote@Function blocking default operations。
        （I would like to give some additional instructions here，But there are not many cases to explain it well，Update later，Only here at this moment）
 --&gt;

vue also has several commonly used functions, such as: @(enter carriage return event), etc.

@and@

@

Problem: A click event was added to the parent element, and the click event was also added to the child element below. At this time, I want to click the child element to get the click event of the child element, but it triggers the event of the parent element:

&lt;view class="footer-box" @click="clickCard"&gt;
        &lt;view @click="footerClick('like')"&gt;&lt;text class="footer-box__item"&gt;like&lt;/text&gt;&lt;/view&gt;
        &lt;view @click="footerClick('Comment')"&gt;&lt;text class="footer-box__item"&gt;Comment&lt;/text&gt;&lt;/view&gt;
        &lt;view @click="footerClick('share')"&gt;&lt;text class="footer-box__item"&gt;share&lt;/text&gt;&lt;/view&gt;
&lt;/view&gt;

At this point, we need to use the @:Stop event bubble method to solve this problem:

&lt;view class="footer-box" @click="clickCard"&gt;
        &lt;view @="footerClick('like')"&gt;&lt;text class="footer-box__item"&gt;like&lt;/text&gt;&lt;/view&gt;
        &lt;view @="footerClick('Comment')"&gt;&lt;text class="footer-box__item"&gt;Comment&lt;/text&gt;&lt;/view&gt;
        &lt;view @="footerClick('share')"&gt;&lt;text class="footer-box__item"&gt;share&lt;/text&gt;&lt;/view&gt;
&lt;/view&gt;

@

There is also a similar method: @: Block the default behavior of events, for example: Write a tag in the code, click it and jump to the target link web page:

&lt;view class="example-body"&gt;
    &lt;a href="" rel="external nofollow"  rel="external nofollow" &gt;Baidu&lt;/a&gt;
&lt;/view&gt;

But if we don't want it to jump but still want to use the a tag, we need to use the @ method at this time:

&lt;view class="example-body"&gt;
    &lt;a href="" rel="external nofollow"  rel="external nofollow"  @='notLink'&gt;Baidu&lt;/a&gt;
&lt;/view&gt;

When you click on the a tag, the target address link will not be redirected.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.