赞
踩
在组件标签上是没办法触发原生的js事件
的,vue会将其作为自定义事件处理
示例代码如下:
<div id="app"> <!-- 使用组件 --> <!-- 组件标签上使用DOM元素原生事件不会触发, --> <my-component :clicks="clicks" @click="handleParentClick" ></my-component> </div> <!-- 组件模板 --> <template id="MyComponent"> <div> 被点击了 <button>点击</button> </div> </template> <script> // 组件选项对象 let MyComponent = { template: `#MyComponent`, } // 实例中注册组件 const vm = new Vue({ el:"#app", components: { "MyComponent": MyComponent }, methods:{ handleParentClick(){ // 11 不会打印 console.log(11); } } }) </script>
此时子组件上绑定的是自定义的事件不是原生的事件,
因为是自定义事件,我们就可以通过使用触发自定义事件的方式,来触发.
通过$emit 触发这个组件标签上的自定义事件
示例代码如下:
<div id="app"> <!-- 使用组件 --> <!-- click 事件不会被当做DOM原生事件处理,只会被当做自定义事件处理--> <my-component @click="handleParentClick" ></my-component> </div> <!-- 组件模板 --> <template id="MyComponent"> <div> 被点击了 <!-- 1. 子组件通过原生click事件触发子组件自己的函数 --> <button @click="handleClick">点击</button> </div> </template> <script> // 组件选项对象 let MyComponent = { template: `#MyComponent`, methods:{ handleClick(){ // 触发组件标签上自定义事件click this.$emit("click") } } } // 实例中注册组件 const vm = new Vue({ el:"#app", components: { "MyComponent": MyComponent }, methods:{ handleParentClick(){ console.log(11); } } }) </script>
如果需要在子组件的dom上绑定原生的事件,而不是一个自定义事件该如何处理
可以通过 vue提供的修饰符.native
来告知绑定的是原生的事件
示例代码如下:
<div id="app"> <!-- 使用组件 --> <!-- 在组件标签上,如果需要使用原生事件,使用修饰符native, 这样vue就会把他当做原生事件处理了--> <my-component @click.native="handleParentClick" ></my-component> </div> <!-- 组件模板 --> <template id="MyComponent"> <div> 被点击了 <button>点击</button> </div> </template> <script> // 组件选项对象 let MyComponent = { template: `#MyComponent`, } // 实例中注册组件 const vm = new Vue({ el:"#app", components: { "MyComponent": MyComponent }, methods:{ handleParentClick(){ console.log(11); } } }) </script>
在一些情况下,我们可能会需要对一个 prop
进行“双向绑定”。事实上,这正是 Vue 1.x 中的 .sync
修饰符所提供的功能。
当一个子组件改变了一个带 .sync
的 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了单向数据流。由于子组件改变 props
的代码和普通的状态改动代码毫无区别,光看子组件的代码时,你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。
上面所说的正是我们在 2.0 中移除 .sync
的理由。但是在 2.0 发布之后的实际应用中,我们发现 .sync
还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。
从 2.3.0 起我们重新引入了 .sync
修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on
监听器。
父组件中
<div id="app"> <!-- 使用组件 --> <my-component :clicks="clicks" @update:clicks = "handleParentClick" ></my-component> </div> <script> // 实例中注册组件 const vm = new Vue({ el:"#app", data:{ clicks: 0 }, components: { "MyComponent": MyComponent }, methods:{ handleParentClick(value){ this.clicks = value } } }) </script>
子组件
<!-- 组件模板 --> <template id="MyComponent"> <div> 被点击了{{ clicks }}次 <button @click="handleClick">点击</button> </div> </template> <script> // 组件选项对象 let MyComponent = { props:["clicks"], template: `#MyComponent`, data(){ return { num:this.clicks } }, methods: { handleClick(){ this.num++; this.$emit("update:clicks",this.num) } } } </script>
父组件
<div id="app"> <!-- 使用组件 --> <my-component :clicks.sync="clicks" ></my-component> </div> <script> // 实例中注册组件 const vm = new Vue({ el:"#app", data:{ clicks: 0 }, components: { "MyComponent": MyComponent } }) </script>
子组件
<!-- 组件模板 --> <template id="MyComponent"> <div> 被点击了{{ clicks }}次 <button @click="handleClick">点击</button> </div> </template> <script> // 组件选项对象 let MyComponent = { props:["clicks"], template: `#MyComponent`, data(){ return { num:this.clicks } }, methods: { handleClick(){ this.num++; this.$emit("update:clicks",this.num) } } } </script>
其实
<my-component
:clicks.sync="clicks"
></my-component>
会被扩展为
<my-component
:clicks="clicks"
@update:clicks = "handleParentClick"
></my-component>
当子组件需要更新 clicks
的值时,它需要显式地触发一个更新事件:
handleClick(){
this.num++;
this.$emit("update:clicks",this.num)
}
我们之前已经学过了在普通的DOM元素上使用v-modle指令来处理双向数据绑定, 一般会用在表单元素上
<div id="app">
<input type="text" v-model="value">
{{ value }}
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
value: ''
}
})
</script>
双向数据绑定就是数据变化,显示视图也随之发生变化, 视图发生变化, vue中的数据也发生变化
理解这个原理后,我们也可以自己通过事件来处理双向数据绑定
就是我们将data中的数据绑定到表单的value值上, 这样只会在当数据变化的时候改变视图, 但是视图的改变会不会修改数据
那么我们就可以使用一个事件来处理这件事情, 当用户输入内容后就会触发函数, 在函数内获取表单最新的值修改掉data中数据
<div id="app"> <input type="text" :value="value" @input = "changeValue" /> {{ value }} </div> <script> const vm = new Vue({ el:"#app", data:{ value: '' }, methods:{ changeValue(){ // 在事件里获取表单的内容 this.value = event.target.value; } } }) </script>
我们利用同样的思路, 将父组件的数据通过单向下行数据流传给子组件
在利用自定义事件,将子组件中的数据传递给父组件, 处理成自定义的双向数据绑定
<div id="app"> <!-- 使用组件 --> <my-component :value="value" @input = "handleParentClick" ></my-component> {{ value }} </div> <!-- 组件模板 --> <template id="MyComponent"> <div> <input type="text" :value="value" @input="handleInput" /> </div> </template> <script> // 组件选项对象 let MyComponent = { props:["value"], template: `#MyComponent`, methods: { handleInput(){ this.$emit("input",event.target.value) } } } // 实例中注册组件 const vm = new Vue({ el:"#app", data:{ value: '' }, components: { "MyComponent": MyComponent }, methods:{ handleParentClick(value){ this.value = value }, } }) </script>
Vue在2.2.0版本中给允许我们在自定义组件上使用v-model来处理双向数据绑定,
<div id="app"> <!-- 使用组件 --> <my-component v-model="value" ></my-component> {{ value }} </div> <!-- 组件模板 --> <template id="MyComponent"> <div> <input type="text" :value="value" @input="handleInput" /> </div> </template> <script> // 组件选项对象 let MyComponent = { props:{ value:{ type:String, required: true } }, template: `#MyComponent`, methods: { handleInput(){ this.$emit("input",event.target.value) } } } // 实例中注册组件 const vm = new Vue({ el:"#app", data:{ value: '' }, components: { "MyComponent": MyComponent } }) </script>
我们会发现在组件中使用v-model指令,等价于
<my-component
:value="value"
@input = "handleParentClick"
></my-component>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。