可复用性的组件

使用组件的原因

作用：提高代码的复用性

组件的使用方法

• 全局注册

Vue.component('my-component',{
    template:'我是组件的内容
' }) 

• 优点：所有的vue实例都可以用

• 缺点：权限太大，容错率降低

• 局部注册

var app = new Vue({
    el:'#app',
    components:{
        'my-component':{
            template: '我是组件的内容'
            }
            } })

- vue组件的模板在某些情况下会受到html标签的限制，比如<table>中只能含有<tr> <td> ,这些元素，所以直接在table中使用组件是无效的，此时可以使用is属性来挂载组件

<table>
    <tbody is="my-component"></tbody>
</table>

组件使用的技巧

• 使用小写字母加-进行命名
• template中的内容必须被一个DOM元素包括 ，也可以嵌套
• 在组件的定义中，除了template之外的其他选项—data,computed,methods
• data必须是一个方法

使用props传递数据 父亲向儿子传递数据

• 在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在 组件中直接使用
• propps来自父级，而组件中data return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，computed，methods中直接使用
• props的值有两种，一种是字符串数组，一种是对象
• 可以使用v-bind动态绑定父组件来的内容

单向数据流

• 解释: 通过 props 传递数据是单向的,也就是父组件数据变化时会传递给子组件，但是反过来不行。
• 目的:是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。
• 应用场景: 业务中会经常遇到两种需要改变 prop 的情况

一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域 下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据，引用父组件的prop

• 步骤一：注册组件
• 步骤二：将父组件的数据传递进来，并在子组件中用props接收
• 步骤三：将传递进来的数据通过初始值保存起来

 <div id="app">
        <my-comp init-count=""666></my-comp>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            components:{
                'my-comp':{
                    props:['init-count'],
                    template:'<div>{{init-count}}</div>',
                    data:function(){
                        return{
                            count:this.init-count
                        }
                    }

                }
            }
        })
    </script>

另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了

• 步骤一：注册组件
• 步骤二：将父组件的数据传递进来，并在子组件中用props接收
• 步骤三：将传递进来的数据通过计算属性进行重新计算

 <div id="app">
        <input type="text" v-model="width">
        <my-comp :width="width">            
        </my-comp>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                width: ""
            },
            components: {
                'my-comp': {
                    props: ['init-count', 'width'],
                    template: '<div :style="style">{{init-count}}</div>',
                    computed: {
                        style: function () {
                            return {
                                width: this.width + 'px',
                                background: 'red'
                            }
                        }
                    }
                }
            }
        })
    </script>

数据验证

• 在html中, myMessage 和 mymessage 是一致的,因此在组件中的html 中使用必须使用kebab-case（短横线）命名方式。在html中不允许使用驼峰！！！！！！
• 在组件中, 父组件给子组件传递数据必须用短横线。在template中，必须使用驼峰命名方式，若为短横线的命名方式。则会直接报错。
• 在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线的命名方式，则会报错。