专栏首页python-爬虫Vue-cli父子组件之间传参

Vue-cli父子组件之间传参

一.父传子(

先写父组件

父组件

<template>
    <子组件  :子组件的变量名='父组件的变量'> </子组件>         //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template>

<script>
    .......//没用的内容我省略了 
    data(){
        return {父组件的变量:1}
    }
</script>

子组件

<template>
    <inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
    .......//没用的内容我省略了 
	props:['子标签的变量名'] //而不是写data里
</script>

二.子传父

先写子组件

子组件

<template>
    <button @click='子组件的方法'>
        子传父
    </button>
</template>
<script>
    .......//没用的内容我省略了 
    data(){return {子组件变量:1}}
    methods:{
        子组件的方法(){
            this.$emit('父组件中的方法名',this.子组件变量)
        }
    }
</script>

父组件

<template>
    <button @emit中定义的方法名='父组件的函数'>
        子传父
    </button>
</template>
<script>
.......//没用的内容我省略了 
methods:{
        父组件的函数(msg){
            console.log(msg)   //这里msg就是this.子组件变量
        }
}
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序自定义组件

    小小咸鱼YwY
  • pands模块的妙用爬取网页中的表格

    拿我这篇为例https://www.cnblogs.com/pythonywy/p/11574340.html

    小小咸鱼YwY
  • linux中网络配置

    小小咸鱼YwY
  • ZooTeam 拍了拍你,来看看如何设计动态化表单

    对于 ToB 业务而言,随着业务的不断壮大,接入的客户逐渐增加,相同页面的差异化的需求越来越多,尤其是在表单层面,小到多一个字段少一个字段这种简单的需求,大到整...

    政采云前端团队
  • React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • 如何使用基于组件的设计方法

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 基于组件的设计方法通常在大型复杂的设计项目中才会谈论到...

    奔跑的小鹿
  • 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有...

    李成熙heyli
  • 微信小程序组件化编程和实践(下)

    现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

    疯狂的小程序
  • 高级 Vue 技巧:控制父类的 slot

    最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题,但也是一个非常有趣的问题。

    前端小智@大迁世界
  • 架构整洁之道导读(二)

    我是《架构整洁之道》(Clean Architecture) 中文版的技术审校者,在审校的过程当中略有感悟,所以希望通过撰写导读的方式分享给大家。

    lambeta

扫码关注云+社区

领取腾讯云代金券