vue 组件 想到哪里写到哪里

2024年5月10日 95次阅读 来源: 荆棘鸟

一. 组件注册的几种方式

全局组册

// 要注册一个全局组件，你可以使用 Vue.component(tagName, options)
// var MyComponent = Vue.extend({
// 　template : '<p>我是全局注册组件</p>'
// })
// vue.componnet('my-component', MyComponnet)

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#app'
})

局部注册

// 和上面的比较 组册在实例里面 只能在被注册的组件里面使用
var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  el: '#app',
  componnets: {
    child: 'child'
  }
})

二. 组件之间的通信

组件化开发 也就是组件之间协同工作. 比如在a组件里面使用b组件, 他们之间怎么传递参数呢?

1. props

// 组册一个组件 然后这个组件要有一个props属性  然后在父组件里面去定义她
<child  msg="hello world"></child>

Vue.component('child',
    {
        props: ['msg'],
        template: '<div>{{msg}}</div>'
    }
)
new Vue({
    el: "#app"
})

// 看起来很简单 但是实际应用不是这样的 比如有两个组件a, b
<a>
  <b data="msg"></b>
</a>
// 我们可以在组件a里面去定义一些数据
data() {
    return {
        msg: 'hello world'
    }
}
// 然后在b组件里面去定义props
props: ['data']

2. 动态pros

加上上面的msg是动态的 那么在b里面 v-bind:data="msg" 就行了

3. 自定义事件

// 1.在子组件的任何事件 2.触发自定义事件 3.调用父组件的方法
<div id="app">
  {{num}}
  <br>
    <child v-on:inc="increat"></child>
</div>

Vue.component('child',{
  template: '<button v-on:click="add">点我+1</button>',
  methods: {
    add() {
      // 点击的同时 触发自定义事件 似乎这个定义事件 就是一个中间键
      this.$emit('inc')
    }
  }
})

new Vue({
  el: '#app',
  data: {
    num: 0
  },
  methods: {
    increat() {
      this.num += 1
    }
  }
})
    原文作者：荆棘鸟
    原文地址: https://segmentfault.com/a/1190000010869438
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞