美文网首页
vue父子组件通信

vue父子组件通信

作者: lvyweb | 来源:发表于2021-07-05 15:38 被阅读0次

    一、vue父组件传值给子组件

    父组件中定义一个数据clickCourtFjm

    <device-tree :courtFjm="clickCourtFjm"></device-tree>
    

    子组件接收数据

     props: {
                courtFjm: {
                    type: String,
                    default: ''
                }
            },
     created(){
                console.log("******courtFjm*****", this.courtFjm);//这里就可以打印出来父组件传的值
            },
    

    二、vue父组件和子组件双向数据绑定

    父组件中

    <see ref="assetList" v-model:dataShow ='dataShow'/>
    

    子组件中接收数据

    props: {
        dataShow: {
            type: Boolean,
            default: false
        }
      },
      emits: ["update:dataShow"],
    // 具体事件中
    methods:{
     handleChange() {
          this.$emit("update:dataShow", this.tableSelect);
        },
    }
    

    相关文章

      网友评论

          本文标题:vue父子组件通信

          本文链接:https://www.haomeiwen.com/subject/oociultx.html