Vue组件化开发

时间：2020-02-02 19:49:28 阅读：97 评论：0 收藏：0 [点我收藏+]

组件化开发

入门案例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue</title>
     <!--引入vue的支持文件-->
     <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
         <div id="app">
             <button-counter></button-counter>
             <button-counter></button-counter>
             <button-counter></button-counter>
             <button-counter></button-counter>
         </div>
 ?
     <script type="text/javascript">
         Vue.component(‘button-counter‘,{
             /*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/
             data:function () {
                 return {count:0}
             },
             
             /*组件template中必须只有一个根元素*/
             template:‘<button @click="add">点击了{{count}}次</button>‘,
             
             methods:{
                 add:function () {
                     this.count+=1;
                 }
             }
         })
         
         const vm = new Vue({
             el:‘#app‘,
             data:{
             }
         });
     </script>
 </body>
 </html>

组件的命名使用规范：

如果使用驼峰式命名组件，那么在使用该组件时，必须要转化成短横杠式的方式使用，否则报错，例如命名了一个‘HelloWorld’组件使用的时候必须是‘hello-world’

局部组件和全局组件

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue</title>
     <!--引入vue的支持文件-->
     <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
         <div id="app">
             <button-counter>
             </button-counter>
             <hello-world></hello-world>
             <hello-tom></hello-tom>
         </div>
 ?
     <script type="text/javascript">
         /*下面这个是全局组件*/
         Vue.component(‘button-counter‘,{
             /*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/
             data:function () {
                 return {count:0}
             },
             template:‘<button @click="add">点击了{{count}}次</button>‘,
             methods:{
                 add:function () {
                     this.count+=1;
                 }
             }
         })
 ?
         /*下面这个是局部组件，
         * 局部组件只能在注册他的父组件中使用，其他地方不能使用
         * 如果局部组件被app组件注册的话，全局组件就不能使用下面的局部组件
         */
         var HelloWorld={
             data:function () {
                 return {msg:‘hello-world‘}
             },
             template: ‘<div>{{msg}}</div>‘
         }
         var HelloTom={
             data:function () {
                 return {msg:‘hello-tom‘}
             },
             template: ‘<div>{{msg}}</div>‘
         }
 ?
         const vm = new Vue({
             el:‘#app‘,
             data:{
             },
             components:{
                 ‘hello-world‘:HelloWorld,
                 ‘hello-tom‘:HelloTom
             }
         });
     </script>
 </body>
 </html>

组件之间的数据交互

父组件向子组件传值

重点：父组件通过props属性向子组件传值，props是单向数据流，只允许父组件向子组件传值

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue</title>
     <!--引入vue的支持文件-->
     <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
         <div id="app">
             <s-component :smsg="pmsg"></s-component>
         </div>
 ?
     <script type="text/javascript">
         
         /*下面是子组件*/
         Vue.component(‘sComponent‘,{
             props:
                 [‘smsg‘],
             data:function () {
                 return {
                     msg:‘子组件的信息‘
                 }
             },
             template:‘<div>{{msg+"-----------"+smsg}}</div>‘
 ?
         });
         
         /*Vue实例对象相当于父组件*/
         const vm = new Vue({
             el:‘#app‘,
             data:{
                 pmsg:‘父组件的信息‘
             }
         });
     </script>
 </body>
 </html>

子组件向父组件传值

重点：子组件通过自定义事件向父组件传递值

Slot插槽

作用：即通过在子组件中定义slot标签，然后可以在其父组件调用时将值插入到标签中。

Vue组件化开发

原文：https://www.cnblogs.com/zhang188660586/p/12253286.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)