VUE DAY3 组件

组件（Component）

组件是VUE最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。

组件化开发就是把一个完整的页面分割成一个一个的小组件。

组件化开发可以使代码更容易维护，得到更好的复用效果。

Vue组件分为全局组件和局部组件：
全局组件：在所有的vue实例中都可以使用
局部组件：只有在当前的vue实例中可以使用

全局组件

Vue.component(tagName, options)

//注册一个全局组件
Vue.component("hello", {
  //注意模板中只能有一个根元素
  //template:'<h1></h1><h1></h1>'; 这是不可以的
  template:'<h1>hello component</h1>';
})

全局组件可以在所有实例中使用

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

局部组件

局部组件卸载vue实例的内部，通过components属性来定义局部组件

components:{
  "hello":{
    template:`<h1>hello</h1>`
  }
}

组件是特殊的vue实例

可以把组件看成一个vue的实例，因此，在vue实例中能配置的属性（data, method, watch等）在组件中依旧能够配置。
组件中的data属性必须是一个函数，返回值才是data的数据

Vue.component("my-cp",{
  template:`
    <div>
      <button @click="fn">{{msg}}</button>
    </div>
  `,
  data(){
    return {
      msg: 'click me'
    }
  },
  methods:{
    fn(){console.log('------->fn')}
  }
})

组件是一个独立封闭的个体，组件之间的数据相互独立，不能互相使用

组件间通讯

如上所述，组件是一个单独的个体，各自的数据无法互相使用，但在工作中，多个组件之间的数据是需要互通的。
组件之间的通讯按照结构分为：
1.父传子
2.子传父
3.非父子

组件通讯-父传子

1.定义father

Vue.component("father", {
  template:`
  <div class="father">
    <son></son>
  </div>
  `,
  data():{
    return {
      name: 'clark',
      power:'super'
    }
  }
})

2.定义son

Vue.component("son", {
  template:`
  <div class="son">superman</div>
  `
})

3.通讯

父组件模板中：

template:`
<div>
  //培养超能力
  //:power是注册的属性
  //"power"是父组件中的数据
  //把数据在这里传给子组件
  <son :power="power"></son>
</div>
`

子组件模板中：

template: `
  <div>
    <p>从father继承了{{power}}</p>
  </div>
`,
//子组件使用props属性接受父组件传来的数据，然后在template中使用
props:['power']

组件通讯-子传父

思路方面，逻辑是在父类的方法中实现，只是实现逻辑的参数是由子组件传递过来的。

let vm = new Vue({
  el:"#dog",
  methods:{
    //父组件中定义了处理事件的方法，id是子组件传来的参数
    delinlist(id){
      ...
    }
  }
})

接下来考虑的是子组件如何传递参数了

Vue.component('btable', {
  template:`
    ...
    //在子组件的模板中绑定click事件，指向组件自己的del(id)方法
    <a @click="del(item.id)"></a>
    ...
  `,
  method:{
    del(id){
      //使用$emit发出当前实例的事件
      this.$emit('del-event', id)
    }
  }
})

在使用中如下

 //这里注意，@del-event绑定的是子组件发出的事件，"delinlist"是父组件中处理数据的方法
<btable @del-event="delinlist"></btable>

组件通讯-非父子

思路：使用一个空的实例md，接受数据的A模板设置方法到md上，再由发送数据的B模板去触发
空模板：

const md = new Vue()

A模板(在md上挂载getmsg方法)

Vue.component('batman', {
                template: `<div>蝙蝠侠收到消息:{{msg}}</div>`,
                created() {
                    md.$on('getmsg', msg => {
                        this.msg = msg
                    })
                },
                data() {
                    return {
                        msg: this.msg
                    }
                }
            })

B模板(点击按钮后触发md上已经挂载的getmsg方法)

Vue.component('flash', {
                template: `<button @click="run">闪电侠说话</button>`,
                data() {
                    return {
                        msg: 'find us'
                    }
                },
                methods: {
                    run() {
                        md.$emit('getmsg', this.msg)
                    }
                }
            })

Vue

var vm = new Vue({
                el: "#dog",
            })

使用

<div id="dog">
  <batman></batman>
  <flash></flash>
</div>

最后编辑于：2019.11.25 21:49:18