国外做二手服装网站,wordpress的标题字体,个人小型网站建设,科凡网站建设基础的子组件和父组件通信已经搞定了#xff0c;可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件#xff0c;不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。
目前小编采用的方式是使用ref 属性this.emit 方法…基础的子组件和父组件通信已经搞定了可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。
目前小编采用的方式是使用ref 属性this.emit 方法 在父页面调用子页面的方法结合this.emit方法实现。在父页面调用子页面的方法并且把子页面里的值通过父页面的自定义事件传递到父页面。
注意先新建子页面然后进行父子传值在父页面注册子页面为组件
父-子传值
父页面 templatediv classhelloChildComponents:msgmsgc/ChildComponentsbutton clicksend()向子组件传值/button/div
/templatescript
import ChildComponents from./ChildComponents.vue
export default {name: HelloWorld,components: {ChildComponents:ChildComponents},data () {return {msgc:}},methods:{send(){this.msgc来自HelloWorld父组件的值;}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style
子页面 templatedivdivh1子组件的值/h1/divdiv{{msg}}br//div/div
/templatescriptexport default {name: test,components: {},props: {msg: String},data () {return {}}
}
/script
style scoped/style
结果
子-父传值
子页面触发
父页面 templatediv classhelloChildComponentssendMsgsendMsg:msgmsgc/ChildComponentsh1父组件的值/h1br/{{msgp}}button clicksend()向子组件传值/button/div
/templatescript
import ChildComponents from./ChildComponents.vue
export default {name: HelloWorld,components: {ChildComponents:ChildComponents},data () {return {msgc:,msgp:,}},methods:{sendMsg(data) {this.msgpdata;},send(){this.msgc来自HelloWorld父组件的值;}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style
子页面
templatedivdivh1子组件的值/h1/divdiv{{msg}}br/button clicksendMsg()向父组件传值/button/div/div
/templatescriptexport default {name: test,components: {},props: {msg: String},data () {return {}},methods: {sendMsg() {//子页面的值推送到父页面的自定义事件里this.$emit(sendMsg,来ChildComPonens自子组件的值)}}}
/script
style scoped/style
结果
父页面触发
父页面需要修改的地方 ChildComponentssendMsgsendMsgrefchile:msgmsgc/ChildComponentsh1父组件的值/h1br/{{msgp}}button clicksendParnt()子组件向父组件传值父组件触发/button//增加一个方法methods:{sendParnt() {this.$refs.chile.sendmsgP()}}
子组件只需要增加一个方法 sendmsgP 父页面可以通过ref 调用 methods: {sendMsg() {this.$emit(sendMsg,来ChildComPonens自子组件的值)},sendmsgP(){this.sendMsg()}}
结果
