组件介绍

vue组件

1. 是页面组成的一部分

2. 是封装好的可重用的代码

组件注册

全局注册 1

大致可以分成三步

1.在我们引入vue.js之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建

使用Vue这个全局对象的component方法进行全局注册一个组件

2.创建根实例,进行视图的绑定

3.组件的显示：将组价的名称作为标签写在视图内部,就能够完成组件的显示

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 定义的组件名作为标签存在,将组件显示在页面上-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>

    //1. 使用vue这个全局队形内置的components方法进行组件的创建
    //在components这个方法中有两个重要的参数,第一个参数是组件的名称,第二个参数是组件的内容
    Vue.component('my-component', {
        //在这里使用一个父标签将组件包裹起来
        template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
    })

    //2. 创建根实例,也就是实例化一个vue对象,进行视图的绑定
    var vm = new Vue({
        el: '#app'
    })
</script>

全局注册2

使用全局的Vue.extend()构造器进行注册

Vue.extend()类似于继承,通过这个构造器扩展(继承)之后,相当于Vue对象本身添加了一些这个对象原先没有的东西

局部注册1

大致可以分成两个部分

1.穿件跟实例

2.在跟实例内部定义组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 这是我定义的组件    占位标签-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>
    //1. 创建根实例
    var vm = new Vue({
        el: '#app',
        //2. 在根实例内部创建组件
        components:{
           'my-component':{
               template: '<div><a href="#">注册</a><a href="#">登录</a></div>'
           }
        }
    })
</script>

　　组件内部的data

组件内部的data属性必须是一个函数

父子组件

一个组件的内部包含另外一个组件，内部的组件称为子组件，外部的组件称为父组件，这就是父子组件

父子组件通信-----解决父子组件之间传值问题

在上下级组件之间进行数据的传递,也就是父子组件通信

父组件需要将数据传递给子组件自组件需要将其内部发生的事情通告给父组件

Props 与 camelCase

数据传输分三步:

1. 进行数据的传输,首先要有数据,也就是要在父组件上定义数据

2. 使用props建立数据通信的渠道

3. 在子组件中接收父组件通过props传递过来的数据

动态props

在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用 v-bind

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>

    <body>
        <div id="app">
            <parent></parent>
        </div>
        <template id="parent">
            <div>
                <div>我是父组件</div>
                <child :message="message"></child>
            </div>
        </template>
        <template id="child">
            <div>
                <div>我是子组件</div>
                <span>{{message}}</span>
            </div>
        </template>
    </body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        //我是父组件
        components:{'parent':{
            template:"#parent",
            data:function(){
                return {
                    message:"hello world"
                }
            },
            //我是子组件
            components:{'child':{
                props:['message'],
                template:"#child"
            }}
        }}
    })
</script>

Props 与 camelCase

猜你喜欢