Vue學習Day03-Vue默認插槽slot中使用data對象中數據的注意點

本文轉載自查看原文 2019-09-26 15:10 672 Vue學習

以下是學習筆記:

　　1.組件默認插槽slot中並不能直接以標簽+插值表達式的形式應用data中數據

<p>{{msg}}</p>

　　2.還是需要在模板字符串template中使用

template:'<div>首頁{{msg}}<slot></slot></div>'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue2.js"></script>
</head>
<body>
   <div id="app">
       <index>
           <p>我是一個p</p>
           <span>我是一個span</span>
           <p>{{msg}}</p> <!-- -★錯誤用法-->
       </index>
   </div> 
   <script>
       Vue.component('index',{
           template:'<div>首頁{{msg}}<slot></slot></div>',//★正確用法
           data(){
               return{
                   msg:"hello world"//發現data數據比如{{msg}}只能在模板中使用
               }
           }
       })
       let vm = new Vue({
           el:"#app",
           data:{

           }
       })
   </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中默認插槽slot vue中的插槽slot java中創建對象中使用默認構造函數的注意點 vue組件-使用插槽分發內容(slot) vue slot插槽的使用方法 vue 插槽slot的理解和使用方法 antdv插槽slot使用 Vue中插槽的使用。 Vue3.0在JSX/TSX下如何使用插槽(slot) 8.Vue組件三---slot插槽