Vue----组件、组件嵌套、传递消息

Vue—-组件、组件嵌套、传递消息

---

1. 什么是组件？
2. 组件分类和使用
3. 组件嵌套
4. 父组件向子组件传递消息
5. 子组件向父组件传递消息

---

1.什么是组件

js组件就是把一系列的功能封装起来，包装成一个对象。比如一个表格组件，一个表单组件等等。一个组件必然包含了某种特定的职能，目的在于可以复用。比方说，你的网站需要展示一个万年历，那么最基本的方法，就是自己画table,自己写逻辑，麻烦得一笔。假如我有100个页面，那么是不是说我要把这些代码复制100遍？？所以，为了避免这种麻烦，就可以把万年历封装成一个组件，然后做成一个js文件发布，别人下载就行了。

看一看官网给出的例子

先定义一个组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

注册这个组件

new Vue({ el: '#components-demo' })

复用这个组件

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

然后就会得到下面的效果：

这样就实现了组件的复用。

2.组件分类和使用

组件分为全局组件和局部组件.
全局组件使用：1.定义 2.使用
局部组件使用有三步：1.定义 2.注册 3.使用
全局组件

    Vue.component("my-nav", {
     template: "<ul><li v-for='item in arr'>{{item}}</li></ul>",
    // 自定义组件里面的数据一定要写成data函数并且有return 返回对象。
    data() {
            return {
            arr: [1, 2, 3, 4, 5, 6]
                }
            }
        });

    <my-nav></my-nav>

局部组件的使用：

//定义组件
let search = {
            template:'<div>hello world</div>'
        };
let vm = new Vue({
            el:'#app',
            data:{
            },
            //第二步 注册组件
            components:{
                search
            }
        })

<!--第三步，使用组件-->
 <search></serarch>

3.组件嵌套

嵌套规则，子组件要在父组件上注册，父组件要到Vue实例上去注册。
例如：

let grandson = {
            template: '<div>grandson</div>'
        };
       //grandson 组件要到父组件上注册
        let son = {
            template:'<div>son<grandson></grandson></div>',
            components:{
                grandson,
            }
        }; 
        let vm = new Vue({
            el:'#app',
            data:{},
            components:{
            //son组件到到vm上去注册
                son,

            }
        })

4.父组件向子组件传递消息

方法：props

     let son = {
            template:'<div>我收到father{{money}}元</div>',
            props:['money']
        };
        let father = {

            template:'<div>father 给你{{m}}<son :money="m"></son></div>',
            components:{
                son
            },
            data(){
                return {m:500}
            }
        };
        let vm = new Vue({
            el:'#app',
            data:{

            },
            components:{father}
        })

    <div id="app">
        <father></father>
    </div>

效果

5.子组件向父组件传递消息

方法 $emit

 let son = {
            props:['money'],
            template:'<div>我收到老爸{{money}}<button @click= "getmore">多给一点</button></div>',
            methods:{
                getmore(){
                    this.$emit('more',1000);
                }
            },
        }
        let father = {
            template:'<div>父亲给了你{{m}} <son @more="givemore" :money="m" ></son></div>',
            data(){
                return {
                    m:500
                }
            },
            methods:{
                givemore(val){
                    this.m = val;
                }
            },
            components:{
                son
            }
        }
        let vm = new Vue({
            el:'#app',
            data:{
            },
            components:{
                father
            }
        })

 <div id="app">
        <father></father>
    </div>

效果图：