Vue中的作用域插槽 v-slot和slot-scope的具体写法

Vue中的作用域插槽 v-slot和slot-scope的具体写法

在学习过程中因为Vue版本问题对slot-scope和v-slot的用法进行的一些探索

  • 父组件替换插槽的标签,但是内容由子组件来提供
  • 在子组件的模板中的插槽后定义
  • 注意版本问题导致的不同写法:template标签和div标签,slot-scope和v-slot
    • Vue2.5.x以下版本用template标签
    • 2.5.x以上版本可以使用div标签
    • 2.6以上版本可以使用v-slot
      • 如果没有对插槽进行命名,则v-slot="xxx"是声明该slot作用域名为xxx,之后的数据调用为xxx.data
      • 如果已经对插槽命名,将内容插入到对应的插槽并且获取子组件的数据,写法为v-slot:插槽名=“xxx”,之后的数据调用为xxx.data

具体代码,详见注释部分


<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
<div id="app">
  <cpn>cpn>
  <cpn>
    
    
    



    
    



    
    



    
    <template v-slot:normal="scope">
      <span v-for="item in scope.data">{
    {item}}*span>
    template>
  cpn>
  <cpn>cpn>
div>


<template id="cpn">
  <div>
    <slot name="normal" :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{
    {item}}li>
      ul>
    slot>
  div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
      
    el:'#app',
    data:{
      
      message:'hello'
    },
    components:{
      
      cpn:{
      
        template:'#cpn',
        data(){
      
          return {
      
            pLanguages:['JavaScript','Java','Python','C#','Python','Go','Swift']
          }
        }
      }
    }
  })
script>
body>
html>

你可能感兴趣的:(#,Vue学习,vue,javascript,js,vue.js)