vue---slot插槽的使用

vue---slot插槽的使用_第1张图片

 <title>slot插槽title>
  head>
  <body>
    
    <div id="app">
      <h1>这是一个如何使用插槽的文档h1>
      <movie>
        <template v-slot:before>
          <p>这是故事的开始p>
        template>
        <template #end>
          <p>这是故事的开始p>
        template>
        <img
          src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1981857816,660769246&fm=26&gp=0.jpg"
          alt=""
        />
      movie>
    div>

    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js">script>
    <script>
      // slot 就叫插槽,占位符
      // slot 设置一个name属性,这个叫具名插槽
      //  使用的时候需要设置一个template节点,通过v-slot进行绑定,或者v-slot可以简写为#
      const movie = {
        template: `

忠犬八公

评论:呜呜呜......真是太感人了

点评:这个电影告诉我们,人与动物之间的情感是伟大的,它们是十分忠诚的,我们一定要善待它们。

`
, }; new Vue({ el: "#app", components: { movie, }, });
script> body>

你可能感兴趣的:(三-框架类,Vue)