VUE（自定义全局组件和局部组件）

最新推荐文章于 2024-02-15 10:38:25 发布

小青龙8085

最新推荐文章于 2024-02-15 10:38:25 发布

阅读量380

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/102835972

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="./vue.js"></script>
   </head>
   <body>
       <div id="root">
           <input v-model="inputValue" />
           <button @click="change">提交</button>
           <ul>
               <todo-item v-for="(item,index) of list":key="index" :content="item"></todo-item>
           </ul>
           <zujian></zujian>
       </div>
       <script>
           Vue.component('todo-item',{ //定义名为todo-list的全局组件
               props:['content'],
               template:'<li>{{content}}</li>'
           })

           var zujian={ //定义名为zujian的局部组件，并且必须在new Vue里面声明。
               template:'<div>这是局部组件</div>'
           }
           new Vue({
               el:"#root",
               components:{
                   'zujian':zujian
               },
               data:{
                   inputValue:'',
                   list:[]
               },
           methods:{
               change:function(){
                   this.list.push(this.inputValue);
                   this.inputValue='' //将"input”放入list里面之后将其初始为空
               }
           }
           })
       </script>
   </body>
</html>

小青龙8085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE（自定义全局组件和局部组件）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...
复制链接

扫一扫