Component

全局化注册组件

Vue.component('qw', {

            template:`<divstyle="color:red;">全局化注册</div>`

       })                                                           

局部注册组件局部注册组件和全局注册组件是向对应的,局部注册的组件只能在组件注册的作用域里进行使用,其他作用域使用无效。

  varapp = newVue({

                el:'#app',

                components: {

                    "qw": {

                        template:`<divstyle="color:red;">局部注册的panda标签</div>`

扫描二维码关注公众号,回复: 1943414 查看本文章

                    }

                }

            })

    

Component 组件props 属性设置

<divid="app">

    <!-- 此处qw对应components中的请问,直接为它赋值 -->

    <qwqwe="12345"></qw>

</div>

 

    <script>

         varapp = newVue({

                el:'#app',

data: {

                 message: qqqqq

             },

                components: {

                    "qw": {

                        //这个属性会自动获取值

                        props: ['qwe'],

                        template:`<divstyle="color:red;">{{qwe}}</div>`

                    }

                }

            })

在构造器里向组件中传值

<qw v-bind:here="message"></qw>此时它的值为data里面的message的值,并且绑定了

Component 父子组件关系

//子组件

varasd = {

            template:`<div>asd</div>`

        }

//父组件

        varqw = {

            template:`<div>

                    <p> qw</p>

                    <asd></asd>

            </div>`,

            components: {

                "asd":asd

            }

        }

        varapp = newVue({

            el:'#app',

            components: {

                "qw":qw

            }

 

        })

Component 标签

<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。

   <componentis="qw"></component>

使用is来决定使用哪一个组件,这样就是使用的qw组件

猜你喜欢

转载自blog.csdn.net/qq_37199582/article/details/80352791