Vue组件初理解

1.组件和模块的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

2.全局组件

使用Vue.extend来创建全局组件
创建组件的第一种方法：

var com1=Vue.extend({
  template:'<h3>呵呵</h3>';
  );
Vue.component("mycom1",com1);

创建组件的第二种方法：

Vue.componnent("mycom2",{
  template:'<h3>呵呵</h3>';
});

创建组件的第三种方法：

//在实例对象的外面定义模板
<template id="con">
<h3>呵呵</h3>
</template>


Vue.componnent("mycom3",{
  template:'#con';
});

属性：

template指定了组件展示的结构，里面有且只能有1个根元素

注意点：

创建组件时可以用驼峰命名法，但是在使用的时候要改为"-"

3.私有组件

定义实例私有组件：

var vm= Vue({
  components:{
    login:{
      template:'<h3>呵呵</h3>';
    }
  }
});

4.组件传值

父传子

属性：父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

<div id="app">
        //a绑定父组件数据msg
        <do :a="msg"></do>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "组件传值"
            },
            components: {
                do: {
                    data() {
                        return {
                            m: "贪玩蓝月",
                            n: "真好"
                        }
                    },
                    template: '<h1>{{m}}===学习了==={{a}}===<do2 :b="n"></do2></h1>',
                    props: ["a"],// 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
                    components: {
                        do2: {
                            data() {
                                return {
                                    s: "我想"
                                }
                            },
                            template: "<span>{{s}}==={{b}}</span>",
                            props: ["b"]
                        }

                    }
                }
            }
        })
    </script>

方法：父组件向子组件传递方法，使用的是事件绑定机制； v-on, 当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用传递进去的这个方法了

子传父

先父传子方法，然后子携带参数给父，完成传参

<div id="app">
        {{shuju}}
        <!--子通过事件绑定定义一个事件属性-->
        <con1 @temp="show"></con1>
    </div>
    <template id="con1">
        <!--子通过点击事件向父传值-->
        <input type="button" @click="dian" value="www">
    </template>
    <script>
        Vue.component('con1', {
            template: '#con1',
            data() {
                return {
                    msg: "嘻嘻哈哈"
                }
            },
            methods: {
                dian() {
                    // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
                   //  emit 英文原意： 是触发，调用、发射的意思，后面参数是携带的参数
                    this.$emit("temp", this.msg)
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                shuju: ""
            },
            methods: {
                show(data) {
                    //父获取子传过来的携带参数，然后赋值给自己的数据
                    console.log('ok');
                    console.log(data)
                    this.shuju = data;
                }
            }
        })

获取DOM
通过实例的ref可以获取dom元素