1 2 3 4

组件介绍

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>

  

 

posted @ 2018-04-16 21:07 Winner.王 阅读(...) 评论(...) 编辑 收藏