Home > Article > Web Front-end > How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

亚连Original: 2018-06-02 09:18:322206browse

This article mainly introduces vue slot to display the template passed by the parent component in the child component. Friends who need it can refer to it

The parent component does not specify the slot attribute, and the default is default

You can use the default value in the slot. If the parent component does not pass the corresponding slot, the default value will be displayed.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click=&#39;click&#39;>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot=&#39;title&#39;>hello</p>
      <p slot=&#39;content&#39;>
        world
      </p>
    </modal>
    <modal></modal>
  </p>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <p>
        modal
        <slot name=&#39;default&#39;>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name=&#39;title&#39;>
        </slot>
      </h1>
      content:
      <slot name=&#39;content&#39;></slot>
      </p>
    </template>
  <script type="text/javascript">
    let modal = {
      template: &#39;#modal&#39;
    }
    new Vue({
      el: &#39;#app&#39;,
      components: {
        // es 简写 ，只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log(&#39;aaa&#39;)
        }
      }
    })
  </script>
</body>
</html>

The above is what I compiled for everyone. I hope it will be used in the future. Helpful to everyone.

How to implement value-passing and URL encoding conversion in JS forms?

How to use jQuery to implement the toggle method of sliding left and right?

How to implement the scroll method on the mobile side in vue?

The above is the detailed content of How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use vue to crop images while enlarging, reducing, and rotating them (detailed tutorial)Next article：How to use vue to crop images while enlarging, reducing, and rotating them (detailed tutorial)

See more

How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

Related articles