IT入门 > 教程 > vue教程 > 组件 >
  • Vue.js 组件

    2019/05/04 点击:6376

    组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可

  • 全局组件

    2019/05/04 点击:8961

    pre class="brush:js">// 注册Vue.component(my-component, { template: div一个自定义组件/div}) // 创建根实例new Vue({ el: #app}) // 模板div id=app my-component/my-component/div 这些组件是全局注册的。也就是说它们在

  • 局部注册

    2019/05/04 点击:8469

    var Child = { template: div一个自定义组件/div}new Vue({ // ... components: { // my-child/my-child 将只在父组件模板中可用 my-child: Child }})

  • 组件data

    2019/05/04 点击:5939

    data 必须是一个函数 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝: var counter = { template:`button @click=num++{{num}}/button`, data:function(){return {num

  • 组件传参

    2019/05/04 点击:8553

    当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。 child message=hello!/childVue.component(child, { // 声明 props props: [message], // 就像 data 一样,prop 也可以在模板中使用

  • 动态 Prop

    2019/05/04 点击:7080

    你也知道 prop 可以通过 v-bind 动态赋值 div input v-model=parentMsg br child :my-message=parentMsg/child/div 如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind todo: { te

  • 单向数据流

    2019/05/04 点击:6637

    Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变

  • 验证

    2019/05/04 点击:8517

    p>们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。 Vue.component(example, { props: { // 基础类型检测 (null 指允许任何

  • 子组件与父组件通信

    2019/05/04 点击:7810

    p>我们知道,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventN

  • slot 插槽

    2019/05/04 点击:4150

    在使用组件时,我们常常要像这样组合它们: app app-header/app-header app-footer/app-footer/app