vue.js 组件 -ag捕鱼王app官网

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 vue 实例都实现了事件接口(events interface)，即：

• 使用 $on(eventname) 监听事件
• 使用 $emit(eventname) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

    

      
{{ total }}
      
      
    

 

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

data 必须是一个函数

上面例子中，可以看到 button-counter 组件中的 data 不是一个对象，而是一个函数：

data: function () {
  return {
    count: 0
  }
}

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：

自定义组件的 v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

等价于：

以下实例自定义组件 jiyik-input，父组件的 num 的初始值是 100，更改子组件的值能实时更新父组件的 num：

示例

    
    
输入的数字为:{{num}}

由于 v-model 默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。

示例

     
     
 
        如果选择框打勾我就会显示。 
    
 

实例中 lovingvue 的值会传给 checked 的 prop，同时当 触发 change 事件时， lovingvue 的值也会更新。