【Vue_02】组件化开发

用户8250147

发布于 2021-02-04 06:45:27

32900

代码可运行

文章被收录于专栏：黑马黑马

运行总次数：0

代码可运行

一、组件注册

1. 全局组件

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

语法 Vue.component("组件名称", { })

示例

2. 局部组件

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

语法

示例

二、组件之间的通信

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>