• 上一篇: webpack 教程资源收集 下一篇:Vue2.0 学习笔记

<article class="message">
  <div class="message-header">
    <p>标题</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    消息内容
  </div>

Vue.component('message',{
    template: `
        <article class="message" v-show="isVisible">
          <div class="message-header">
            <slot name="title">默认标题</slot>
            <button class="delete" @click="hideMessage"></button>
          </div>
          <div class="message-body">
            <slot></slot>
          </div>
        </article>
    `,
    data() {
        return {
            isVisible:true
        }
    },
    methods:{
        hideMessage() {
            this.isVisible = false
        }
    }
});


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

<div id="root">
    <message>
        <template slot="title">欢迎</template>
        你好,Vue
    </message>
</div>

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

<message>
    <h1 slot="title">欢迎</h1>
    你好,Vue
</message>

那么就会被渲染成:

<h1>欢迎</h1>

使用 pros

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

<message title="欢迎" body="你好，Vue"></message>

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

template: `
    <article class="message" v-show="isVisible">
      <div class="message-header">
        {{ title }}
        <button class="delete" @click="hideMessage"></button>
      </div>
      <div class="message-body">
        {{ body }}
      </div>
    </article>
`,

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

Vue.component('message',{
    props: ['title','body'],
    template: `
        <article class="message" v-show="isVisible">
          <div class="message-header">
            {{ title }}
            <button class="delete" @click="hideMessage"></button>
          </div>
          <div class="message-body">
            {{ body }}
          </div>
        </article>
    `,
    data() {
        return {
            isVisible:true
        }
    },
    methods:{
        hideMessage() {
            this.isVisible = false
        }
    }
});


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

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

附录：

• 源码点击预览

• Bulma: a modern CSS framework based on Flexbox

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 2.0 入门系列（6）组件实例之消息框全部内容，希望文章能够帮你解决Vue 2.0 入门系列（6）组件实例之消息框所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。