【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别

【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别我们可以在一个通过newVue创建的Vue根实例中,把这个组件作为自定义元素来使用:​局部组件,只能在当前vue实例挂载的对象中使用,类似于局部变量,有块级作用域。使用组件。​全局组件,可以在多个vue实例中使用,类似于全局变量。,然后在vue实例中使用注册了局部组件。​使用方式与全局变量一样,直接使用。,在vue实例挂载的div中调用了。中使用局部组件注册了。…………

目录

前言:

完整内容请关注:

一、组件的基本使用

二、全局组件和局部组件

全局注册,通过 Vue.component

局部注册,通过 components:{}

全局组件

局部组件

三、父组件和子组件的区别


前言:

完整内容请关注:

(1条消息) Vue 的基础学习_小余努力搬砖的博客-CSDN博客icon-default.png?t=M666https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482

一、组件的基本使用

简单的组件化使用例子

组件是可复用的 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>

三、父组件和子组件的区别

​ 上述代码中定义了两个组件对象cpn1cpn2,在组件cpn2中使用局部组件注册了cpn1,并在template中使用了注册的cpn1,然后在vue实例中使用注册了局部组件cpn2,在vue实例挂载的div中调用了cpn2cpn2cpn1形成父子组件关系。

注意:组件就是一个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>

今天的文章【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32196.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注