! 认真看,保证你会学到东西。
一、父子汇编应做的事情:
首先定义一个名为son的子组件。
将子组件中的data属性设置为父组件传递的值。
在props中声明此数值是父组件传递的参数。
父组件需要:
然后定义名为father的父组件。
引入子组件。
注册子组件。
使用子组件。
绑定要传递给子组件的属性。
父组件源码:
templateviewh3父组件/H3 input type=' text ' v-model=' value ' /! -子组件----son : data=' value '/son/view/template script//子组件importsonfrom ' @/pages/son/son.vuun
templateviewh3子部件/H3 H4 { {数据} }/H4/view/templatescriptexportdefault {//此props类似于java的super。 super的作用是调用父类的成员变量和方法。 props:['data'],data ({返回},methods: {},components 3360 { }/script style/style 3358 www.style
可以看到,无论从父组件传递什么字符,都会传播到子组件。
二、子父重点: this.$Emit(eventname,value ) ) ) ) )。
$emit方法接收两个参数。 eventName是事件名称,父组件使用此名称接收参数,value是要传递的值。
this.$emit是uniapp官方发布的,详见官方:
3359 uni app.d cloud.io/collocation/frame/communication? id=emit
子组件需要:
首先定义一个名为son的子组件。
在子组件中设置输入输入框,双向绑定属性sonValue (可以自由命名)。
设置button按钮,然后单击触发函数。 函数的作用是将在上面的输入框中输入的数字传递给父组件。
父组件需要:
然后定义名为father的父组件。
引入子组件。
注册子组件。
使用子组件。
将应该传递给父组件的值绑定到子组件。
名为getSonValue的方法的作用是:从子组件传递的值分配给方法的value,最后呈现页面。子组件源码:
templateviewh3父组件: { { message }/H3 brson @ send-value=' getsonvalue '/son/view/templatescriptimportsonfrom ' son.vue ' export default { data () return ) message:methods3360 ) getsonvalue () value
templateviewh3次组件/H3 input type=' text ' v-model=' son value '/button @ click=' send '分发/button/view/templalar },components 3360 { }/script style/style http://www.Sina.com /
请注意,在子部件的input输入框中输入的文字可以上载到父部件。
结束