• 技术文章 >web前端 >Vue.js

    vue.js组件如何父传子

    coldplay.xixicoldplay.xixi2020-11-17 15:29:34原创424

    vue.js组件实现父传子的方法:首先子组件在props中创建一个属性,用以接收父组件传过来的值;然后父组件中注册子组件,并在子组件标签中添加子组件props中创建的属性;最后把需要传给子组件的值赋给该属性。

    【相关文章推荐:vue.js

    vue.js组件实现父传子的方法:

    1、创建子组件,在src/components/文件夹下新建一个Child.vue

    2、Child.vue的中创建props,然后创建一个名为message的属性

    fc5fb7d06530f132d01301a122b2205.png

    3、在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

    c0f7b302755784300e4aa4d6c458d3b.png

    4、保存修改的文件,查看浏览器

    c6194f244ae43568df3121434dd52b5.png

    5、我们依然可以对message的值进行v-bind动态绑定

    af87df05a18db61c8d8889cc2148e0e.png

    此时浏览器中

    4b25ea436c7d75d0c44d91de60f3a49.png

    相关免费学习推荐:javascript(视频)

    以上就是vue.js组件如何父传子的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vue.js 组件父传子
    上一篇:vue.js怎么用正则校验 下一篇:vue.js如何循环数组

    相关文章推荐

    • Vue.js 学习之四:Vue 组件基础• vue如何实现一个电子签名组件?• vue2.0非父子组件间怎么进行通讯?• vue.js循环引用组件报错怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网