Vue 2.0 入门系列（6）组件实例之消息框

本节要实现一个消息框组件。效果：

Bulma 消息框

我们使用的是 Bulma 的 消息框。Bulma 的消息框的基本界面如下:

  

    
标题
    
  
  

    消息内容
  

纯静态页面，删除功能需要我们去实现。

使用 slot

首先，我们考虑用之前学到过的 slot 来实现：

Vue.component('message',{
    template: `
        

          

            默认标题
            
          
          

            
          
        
    `,
    data() {
        return {
            isVisible:true
        }
    },
    methods:{
        hideMessage() {
            this.isVisible = false
        }
    }
});


var vm = new Vue({
    el:"#root"
});

因为我们使用了多个 slot，为了能否区分，可以将标题的 slot 取名。这样，在父实例中就可以这样使用：

    
        
        你好,Vue
    

使用 template 的好处是页面渲染时会保持子组件的样子。当然，也可以这样:

    
欢迎
    你好,Vue

那么就会被渲染成:

欢迎

使用 pros

我们在来看看另外一种实现方式：

应当如何实现呢？模板似乎可以这样写:

template: `
    

      

        {{ title }}
        
      
      

        {{ body }}
      
    
`,

这种情景属于「组件的内部通信」，即 message 实例（parent）的数据要传递给 message 组件(child)，这需要在组件的 props 属性中进行定义 ：

Vue.component('message',{
    props: ['title','body'],
    template: `
        

          

            {{ title }}
            
          
          

            {{ body }}
          
        
    `,
    data() {
        return {
            isVisible:true
        }
    },
    methods:{
        hideMessage() {
            this.isVisible = false
        }
    }
});


var vm = new Vue({
    el:"#root"
});

在组件的 props 属性中定义好之后，实例就可以直接通过属性的方式传递数据给组件了。

---

附录：

• 源码

• Bulma: a modern CSS framework based on Flexbox