网站后台seo优化如何做,做网站深紫色搭配什么颜色,恩做网站动态页面好,wordpress主题转html##组件通信#xff1a;
子组件获取父组件的数据父组件获取子组件的数据平行组件之间的通信vue2.0中用子组件修改父组件数据报错问题一定需要通过子组件修改父组件 子组件获取父组件的数据 通过子组件中的属性props#xff0c;以与父组件数据的绑定。#xff08;注意#x…##组件通信
子组件获取父组件的数据父组件获取子组件的数据平行组件之间的通信vue2.0中用子组件修改父组件数据报错问题一定需要通过子组件修改父组件 子组件获取父组件的数据 通过子组件中的属性props以与父组件数据的绑定。注意1.0版本允许子组件修改父组件的数据使用sync进行同步。2.0不再支持
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srclib\vue.js/scriptstyle[v-cloak] {display: none;}/stylescriptwindow.onload function() {Vue.component(parent, {template: divh1父组件--{{msg1}}, {{msg2}}/h1child :m1msg1 :m2msg2/child/div,data() {return {msg1: 父组件数据1,msg2: 父组件数据2,}}})Vue.component(child, {template: h2子组件--{{m1}}, {{m2}}/h2,props: [m1, m2],})new Vue ({el: #box,data: {},})}/script
/head
bodydiv idbox v-cloakparent/parent/div
/body
/html父组件获取子组件的数据 利用子组件的事件调用$emit(事件名数据参数)进行事件监听并传递参数给父组件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srclib\vue.js/scriptstyle[v-cloak] {display: none;}/stylescriptwindow.onload function() {Vue.component(parent, {template: divh1父组件--{{msgc}}/h1child m3get/child/div,data() {return {msgc: }},methods: {get(msg) {this.msgc msg;}},}),Vue.component(child, {template:divh2子组件--{{msg3}}/h2input typebutton name id value按钮 clicksend/div,data() {return {msg3: 子组件数据,}},methods: {send() {this.$emit(m3, this.msg3);}}})new Vue ({el: #box,data: {},})}/script
/head
bodydiv idbox v-cloakparent/parent/div
/body
/html平行组件之间的通信 通过定义事件调度器用emit()传递用emit()传递用emit()传递用on()接收
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srclib\vue.js/scriptstyle[v-cloak] {display: none;}/stylescriptwindow.onload function() {// 事件调度器var Event new Vue();Vue.component(First, {template: divFirst说input keyuponChange v-modelfir/div,data() {return {fir: ,}},methods: {onChange() {Event.$emit(sec_said, this.fir);}}})Vue.component(Second, {template: divSecond重复First说的话{{sec}}/div,data() {return {sec: ,}},mounted() {// 用变量存下this的指向var me this;Event.$on(sec_said, function(data) {me.sec data})}})new Vue ({el: #box,data: {},})}/script
/head
bodydiv idbox v-cloakFirst/Firstsecond/second/div
/body
/htmlvue2.0中用子组件修改父组件数据报错问题 可以利用mounted()进行中转变为单纯的对子组件进行修改这样可以不产生错误信息但是并不能将更改同步到父组件身上
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srclib\vue.js/scriptstyle[v-cloak] {display: none;}/stylescriptwindow.onload function() {Vue.component(child, {template: divh3子组件/h3input typebutton name id value按钮 clickchange()strong{{b}}/strong/div,data() {return {b: ,}},props:[msg],// 通过mounted进行中转变为对子集元素的操作mounted() {this.b this.msg;},methods: {change() {this.b 被更改了;}}})new Vue ({el: #box,data: {a: 父组件数据,},})}/script
/head
bodydiv idbox v-cloak父级 - {{a}}child :msga/child/div
/body
/html一定需要通过子组件修改父组件 那么可以采用下面的方法将数据封装成一个对象传递给子组件由于js对象之间是引用的关系所以改变引用必然改变数据。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srclib\vue.js/scriptstyle[v-cloak] {display: none;}/stylescriptwindow.onload function() {Vue.component(child, {template: divh3子组件/h3input typebutton name id value按钮 clickchange()strong{{msg.a}}/strong/div,props:[msg],mounted() {this.b this.msg;},methods: {change() {this.msg.a 被更改了;}}})new Vue ({el: #box,data: {giveData: {a: 父组件数据,}},})}/script
/head
bodydiv idbox v-cloak父级 - {{giveData.a}}child :msggiveData/child/div
/body
/html
