Rumah > Artikel > hujung hadapan web > 在vue中slot如何实现在子组件中显示父组件传递的模板（详细教程）

在vue中slot如何实现在子组件中显示父组件传递的模板（详细教程）

亚连asal: 2018-06-02 09:18:322496semak imbas

这篇文章主要介绍了vue slot 在子组件中显示父组件传递的模板,需要的朋友可以参考下

父组件使用没有指定slot属性，默认为default

在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值

<!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>

上面是我整理给大家的，希望今后会对大家有帮助。

在JS表单中如何实现传值和URL编码转换？

利用jQuery如何实现左右滑动的toggle方法？

在vue中如何实现移动端的scroll滚动方法？

Atas ialah kandungan terperinci 在vue中slot如何实现在子组件中显示父组件传递的模板（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：利用vue如何实现裁切图片同时实现放大、缩小、旋转功能（详细教程）Artikel seterusnya：在vue2.0中如何实现自定义饼状图 (Echarts)组件

Artikel berkaitan

Lihat lagi