vue 组件使用说明

vue 组件使用说明

一个组件实质上是一个拥有预定义选项的一个 Vue 实例在header组件内部允许外部使用，需要导出属性，有2种导出方法 <template> <div id="app"> <mi-ni-nav-app></mi-ni-nav-app>//注意，html不区分大小写，所以需要将miNiNavApp写成mi-ni-nav-app组件名 </div> </template> import NavApp from "./components/common/nav.vue" export default { name: 'app', components:{ miNiNavApp:NavApp//声明组件 //'mi-ni-nav-app':NavApp//也可以这样写 } }

以上代码实际上会自动生成一个 new vue

模式组件

子组件modal.vue

注意：‘transition’的上级只能是‘template’不能有div标签或者其它标签，否则‘transition’不起作用

<template> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> </div> </div> </div> </transition> </template> //css样式写在子组件modal.vue里 <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 350px; margin: 0px auto; padding: 50px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>

父组件模版：

<template> <div> <button id="show-modal" @click="showModal = true">Show Modal</button> <modal v-if="showModal" @close="showModal = false"> <h3 slot="header">custom header</h3> </modal> </div> </template> <script> import modalApp from "./modal.vue" export default { data () { return { showModal:false } }, components:{ "modal":modalApp }, } </script>