Vue：把组件作为自定义元素来使用以及Identifier ' simple

这里介绍两种组件调用的方法：

1、直接在当前组件（HelloVue.vue）中使用Vue.component插入一个子组件button-counter：

<template><div id="vue"><div id="components-demo"><button-counter></button-counter></div></div>
</template><script type="text/javascript">
// 引入
import Vue from 'vue'export default {......        // 组件本身的一些变量的定义放在这里
}Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script><style type='text/css'>
</style>

其中Vue.component('button-counter', { .... }) 是子组件的内容，template是子组件的页面内容。

PS：data必须是一个函数

当我们定义这个<button-counter>组件时，你可能会发现它的data并不是像这样直接提供一个对象：

data: function () {return {count: 0}
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {return {count: 0}
}

由于你可以将组件进行任意次数的复用（注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建），如果 Vue 没有这条规则，点击这个按钮就可能会影响到其他所有实例。

2、我们也可以直接在当前组件页面上引入其他组件：

<template><div id="vue"><div><simple-counter></simple-counter>  </div></div>
</template><script type="text/javascript">
// 引入其他组件
import simpleCounter from './simple-counter.vue'export default {// 这里需要将模块引出，可在其他地方使用components: {'simple-counter': simpleCounter},data () {......      // 当前组件的变量等声明在这里},methods: {.....}
}
</script><style type='text/css'>
</style>

在被当做标签使用的组件中，我们像往常一样创建一个组件即可：

例如这里我们使用的组件simple-counter.vu：

<template><div id="app"><button v-on:click="counter += 1">{{ counter }}</button></div>
</template><script type="text/javascript">
// 注册
export default {data () {return {counter: 0}}
}
</script>

在页面上的展现效果——上面是simple-counter组件的效果，下面是button-counter的效果：

注意如果出现这样的error信息：Identifier 'simple_counter' is not in camel case

这里建议组件的引用命名使用驼峰命名法即可~改成simpleCounter就可以正确运行啦！

Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决相关推荐

[vue] vue给组件绑定自定义事件无效怎么解决？
[vue] vue给组件绑定自定义事件无效怎么解决? 两种方式 1.组件外部加修饰符.navtive 2.组件内部声明$emit('自定义事件') 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
Vue.js 组件基础
基本示例这里有一个 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', {data: function ...
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...
vue教程4：自定义组件的使用
概述组件是一个可复用的vue实例组件通过Vue.component(组件名称, 配置)进行注册组件的data必须是返回json对象的函数,这样组件复用时每个对象都有各自的属性实例通过templ ...
Vue组件及自定义事件
目录 Vue.js 组件动态 Prop Prop 验证 Vue.js 组件 - 自定义事件 data 必须是一个函数
iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...

Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决

1、直接在当前组件（HelloVue.vue）中使用Vue.component插入一个子组件button-counter：

2、我们也可以直接在当前组件页面上引入其他组件：

Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决相关推荐

最新文章

热门文章