【Vue_02】 组件化开发

原创
02/17 21:10
阅读数 1.4K

一、组件注册

1. 全局组件

1.全局组件注册后,任何 Vue 实例都可以使用 2.组件其实也是一个 Vue 实例,因此它在定义时也有:data、methods、生命周期函数等 3.不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有 el 属性。 4.但是组件渲染需要 html 模板,所以增加了 template 属性,值就是 HTML 模板,模板中只能有一个根标签 5.data 必须是一个函数,不再是一个对象。因此组件复用时各个组件之间互补影响。

  • 语法 Vue.component("组件名称", { })
  • 示例
    <div id="app">
        <first></first>
    </div>
        
    <script>
        Vue.component("first",{
            template: `
                <div>
                    <h1>China---{{year}}---{{msg}}</h1>
                </div>
            `,
            data() {
                return {
                    msg: "大好河山",
                    year: 2019
                }
            }
        });
    
        var app = new Vue({
            el:"#app"
        });
    </script>
    
    在这里插入图片描述

2. 局部组件

局部组件只有在当前注册它的 Vue 实例中使用

  • 语法
    var first = { };
    var app = new Vue({
        el:"#app",
        components:{
            first: first // 将定义的对象注册为组件
            first // 组件名与对象名一致时可以简写
        }
    })
    
  • 示例
    <div id="app">
        <!-- 组件复用 -->
        <first></first>
        <first></first>
        <first></first>
    </div>
        
    <script>
        var first = {
            template:'<button v-on:click="count++">{{ count }} 次</button>',
            data(){
                return {
                    count:0
                }
            }
        }
    
        var app = new Vue({
            el:"#app",
            components: {
                first
            }
        });
    </script>
    
    在这里插入图片描述

二、组件之间的通信

1. 父向子通信

父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性 props 接收 在 props 中使用驼峰形式,html 中需要使用短横线的形式字符串形式的模板中没有这个限制

<div id="app">
     <first :str="msg" :tit="title"></first>
 </div>
     
 <script>
     var first = {
         props: ["str","tit"],
         template:'<h1>{{tit}} {{str}}</h1>',
         data(){
             return {
                 count:0
             }
         }
     }

     var app = new Vue({
         el:"#app",
         data: {
             msg: "父向子通信",
             title: "No.1"
         },
         components: {
             first
         }
     });
 </script>

在这里插入图片描述

2. 子向父通信

子组件不能直接向父组件传值,我们可以通过操作父组件的方法来实现通信 子组件用 $emit() 触发事件 父组件使用 v-on 来监听事件

<div id="app">
    父组件:{{num}}
    <!-- 父组件监听子组件 add-num 事件,使用 add 方法处理此事件,可以使用 add($event) 来接收参数 -->
    <first :num="num" @add-num="add"></first>
</div>
    
<script>
    var first = {
        props: ["num"],
        template:'<div> 子组件:{{num}} <button @click="fun">加</button> </div>',
        methods: {
            fun() {
            	<!-- 子组件用 $emit("事件名称", "参数(可无)") 触发事件 add-num -->
                this.$emit("add-num");
            }
        }
    }

    var app = new Vue({
        el:"#app",
        data: {
           num: 10
        },
        components: {
            first
        },
        methods: {
            add() {
                this.num ++
            }
        }
    });
</script>

在这里插入图片描述

3. 兄弟间通信

兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据。事件中心 var hub = new Vue() 传递数据方,通过 hub.$emit(方法名,参数) 触发事件

接收数据方,通过在 mounted 钩子中用 hub.$on(方法名,(参数)=> {}) 监听事件

销毁事件通过 hub.$off(方法名) 进行销毁,销毁之后无法进行传递数据

<div id="app">
         <first></first>
         <last></last>
 </div>
         
 <script>
     // 事件中心
     var hub = new Vue();

     // 组件1:first
     Vue.component("first", {
         template:'<div> fist 组件:{{num}} <button @click="fun">last组件+1</button> </div>',
         data() {
             return {
                 num: 0
             }
         },last
         methods: {
             fun() {
                 hub.$emit("last-event",1);
             }
         },
         mounted () {
             // 此处需要使用箭头函数,否侧 this 不代表组件
             hub.$on("first-event",(value) => {
                 this.num += value;
             })
         }
     });

     // 组件2:last
     Vue.component("last", {
         template:'<div> last 组件:{{num}} <button @click="fun">first组件+2</button> </div>',
         data() {
             return {
                 num: 0
             }
         },
         methods: {
             fun() {
                 hub.$emit("first-event",2);
             }
         },
         mounted() {
             hub.$on("last-event",(value) => {
                 this.num += value;
             })
         }
     });

     var app = new Vue({
         el:"#app"
     });
 </script>      

在这里插入图片描述

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部