网站 空间,表格做的网站影响收录,织梦cms源码,怎样用网站做淘宝推广1、监听自定义事件
父组件通过使用 Prop 为子组件传递数据#xff0c;但如果子组件要把数据传递回去#xff0c;就需要使用自定义事件来实现。父组件可以通过 v-on 指令#xff08;简写形式“”#xff09;监听子组件实例的自定义事件#xff0c;而子组件可以通过调用内建…1、监听自定义事件
父组件通过使用 Prop 为子组件传递数据但如果子组件要把数据传递回去就需要使用自定义事件来实现。父组件可以通过 v-on 指令简写形式“”监听子组件实例的自定义事件而子组件可以通过调用内建的 $emit() 方法并传入事件名称来触发自定义事件。 组件之间的数据传递 父传子使用 Props 属性。 子传父使用 $emit() 方法。 $emit() 方法的语法格式如下
this.$emit( eventName, […args] )
参数说明
eventName传入事件的名称。 […args]触发事件传递的参数该参数是非必选。
【实例】使用$emit()方法实现子组件向父组件传递事件。
1创建 ParentComponent.vue 父组件
templatefieldsetlegend父组件/legendh3父组件接收到子组件传递的数据/h3p博客信息{{ blogName }}/pp博客信息{{ blogUrl }}/p!-- 第三步使用组件 --ChildComponent receiverDatagetBlogInfo //fieldset
/templatescript
//第一步引用组件
import ChildComponent from /components/ChildComponent.vueexport default {data() {return {blogName: ,blogUrl: }},//第二步注册组件components: {ChildComponent,},//方法methods: {getBlogInfo: function (blogName, blogUrl) {this.blogName blogName;this.blogUrl blogUrl;}}
}
/script
2创建 ChildComponent.vue 子组件
templatefieldsetlegend子组件/legendbutton clicksendData传递数据给父组件/button/fieldset
/templatescript
export default {data() {return {blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao}},methods: {sendData: function () {// 核心代码使用 $emit() 方法this.$emit(receiverData, this.blogName, this.blogUrl);}}
}
/script
3在 App.vue 根组件中引入父组件
template!-- 第三步使用组件 --ParentComponent /
/templatescript
//第一步引用组件
import ParentComponent from /components/ParentComponent.vueexport default {//第二步注册组件components: {ParentComponent,}
}
/scriptstyle/style
执行结果 2、组件事件配合 v-model 指令
如果是在子组件中用户输入数据我们希望在获取数据的同时发生数据给父组件这是可以配合 v-model 指令使用。
【实例】子组件中用户输入数据在父组件中实时获取数据。
1修改 ParentComponent.vue 父组件
templatefieldsetlegend父组件/legend!-- 第三步使用组件 --ChildComponent searchEventgetSearch /h3父组件接收到子组件传递的数据/h3接收到的搜索关键字input typetext v-modelsearch //fieldset
/templatescript
//第一步引用组件
import ChildComponent from /components/ChildComponent.vueexport default {data() {return {search: }},//第二步注册组件components: {ChildComponent,},//方法methods: {getSearch: function (keyword) {this.search keyword;}}
}
/scriptstyle
input {width: 300px;padding: 3px;font-size: 16px;
}
/style
2修改 ChildComponent.vue 子组件
templatefieldsetlegend子组件/legend搜索input typetext v-modelsearch //fieldset
/templatescript
export default {data() {return {search: }},// 监听器watch: {search(newValue, oldValue) {// 核心代码使用 $emit() 方法this.$emit(searchEvent, newValue);}}
}
/script
执行结果
