目录
前言:
收款定制开发完整内容请关注:
一、收款定制开发组件的基本使用
收款定制开发简单的组件化使用例子
收款定制开发组件是可复用的 Vue 实例,且带有一个名字:
在这个例子中是button-counter 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:<button-counter></button-counter>
template
中是组件的DOM元素内容。
<button-counter></button-counter>使用组件
- <div id="app">
- <button-counter></button-counter>
- </div>
- <script src="./vue.js"></script>
- <script>
- Vue.component('button-counter',{
- data:function(){ //必须是函数
- return{
- count:0
- }
- },
- template:'<button @click="handle">点击了{{count}}</button>',//只能有一个根元素
- methods:{
- handle:function(){
- this.count++
- }
- }
- })
-
- const vm = new Vue({
- el:"#app",
- data(){
- return{
-
- }
- }
- })
- </script>
二、全局组件和局部组件
全局注册,通过 Vue.component
局部注册,通过 components:{}
全局组件
全局组件,可以在多个vue实例中使用,类似于全局变量。
使用Vue.component('HelloWorld', {data(){}})
方式注册,直接使用<button-counter></button-counter>
调用。HelloWorld
是全局组件的名字,{data(){}}
是定义的组件对象。
<hello-world></hello-world>
第二个全局组件通过<HelloWorld></HelloWorld>
实现了在渲染
- <div id="app">
- <button-counter></button-counter>
- <hello-world></hello-world>
- </div>
- <script src="./vue.js"></script>
- <script>
- Vue.component('HelloWorld',{
- data(){
- return{
- msg:"HelloWorld"
- }
- },
- template:`<div>{{msg}}</div>`
- })
- Vue.component('button-counter',{
- data:function(){ //必须是函数
- return{
- count:0
- }
- },
- template:`
- <div>
- <button @click="handle">点击了{{count}}</button>
- <HelloWorld></HelloWorld>
- </div>`,
- //只能有一个根元素
- methods:{
- handle:function(){
- this.count++
- }
- }
- })
- const vm = new Vue({
- el:"#app",
- data(){
- return{
-
- }
- }
- })
- </script>
局部组件
局部组件,只能在当前vue实例挂载的对象中使用,类似于局部变量,有块级作用域。
使用方式与全局变量一样,直接使用<hello-world></hello-world>
调用
-
- <div id="app">
- <hello-world></hello-world>
- <hello-tom></hello-tom>
- <hello-jerry></hello-jerry>
- </div>
- <script src="./vue.js"></script>
- <script>
- let HelloWorld ={
- data:function(){
- return{
- msg:'HelloWorld'
- }
- },
- template:`<div>{{msg}}</div>`
- };
- let HelloTom ={
- data:function(){
- return{
- msg:'HelloTom'
- }
- },
- template:`<div>{{msg}}</div>`
- };
- let HelloJerry ={
- data:function(){
- return{
- msg:'HelloJerry'
- }
- },
- template:`<div>{{msg}}</div>`
- }
- const vm = new Vue({
- el:"#app",
- data:{
-
- },
- components:{
- 'hello-world': HelloWorld,
- 'hello-tom': HelloTom,
- 'hello-jerry': HelloJerry,
- }
- })
- </script>
三、父组件和子组件的区别
上述代码中定义了两个组件对象cpn1
和cpn2
,在组件cpn2
中使用局部组件注册了cpn1
,并在template
中使用了注册的cpn1
,然后在vue实例中使用注册了局部组件cpn2
,在vue实例挂载的div中调用了cpn2
,cpn2
与cpn1
形成父子组件关系。
注意:组件就是一个vue实例,vue实例的属性,组件也可以有,例如data、methods、computed等。
- <div id="app">
- <cpn2></cpn2>
- </div>
- <script src="../js/vue.js"></script>
- <script>
- // 1.创建组件构造器对象
- const cpn1 = Vue.extend({
- template:`
- <div>
- <h2>标题1</h2>
- <p>组件1</p>
- </div>`
- })
- // 组件2中使用组件1
- const cpn2 = Vue.extend({
- template:`
- <div>
- <h2>标题2</h2>
- <p>组件2</p>
- <cpn1></cpn1>
- </div>`,
- components:{
- cpn1:cpn1
- }
- })
-
- const app = new Vue({
- el:"#app",
- components:{//局部组件创建
- cpn2:cpn2
- }
- })
- </script>