首页 > 编程知识 正文

vue什么是父子组件,vue3父子组件传值

时间:2023-05-04 13:05:09 阅读:18963 作者:2084

! 认真看,保证你会学到东西。

一、父子汇编应做的事情:

首先定义一个名为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输入框中输入的文字可以上载到父部件。

结束

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。