vue.js私有组件创建方法
私有组件是在Vue(){}内部定义的,全局组件在Vue(){}外部定义
<div id="main" v-cloak> <login></login> //以组件名称为标签,用于显示组件 </div> <template id="temp"> //用template标签定义组件模版,id定义组件名称 <h1>登录组件---{{msg}}</h1> //用插值表达式来渲染 </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#main', components: { //用components属性定义组件 login: { //login为组件名称 template: '#temp', //获取组件模版 data() { //data方法返回组件内容 return { msg: '组件中data' } }, methods: {} } } }) </script>
显示结果如下: