首页 > 其他分享 >vue父子组件的传值总结

vue父子组件的传值总结

时间:2022-12-07 16:57:16浏览次数:44  
标签:vue transmitData default export 组件 message 传值

情况一:父组件给子组件传值方法,使用props

父页面:parent.vue

<template>
    <div class="sidebar_contianer">
        <sidebar-item :routerData="transmitData"></sidebar-item>
    </div>
</template>
<script>
import sidebarItem from './sidebarItem'
export default {
    data(){
        return{
            transmitData:{
                title:'首页',
                uuid:'123'
            }
        }
    },
    components:{
        sidebarItem
    }
}
</script>

第一步:用import引入子组件

第二步:在components中注入子组件

第三步:在子组件中定义一个指令:routerData="transmitData"  (routerData名称需要和子组件中的props保持一致,transmitData是要传递给子组件的数据)

子页面:child.vue

<script>
export default {
    name:'sidebarItem',
    props:{
        transmitData:{
            type:Object,
            default:null
        }
    }
}
</script>

第四步:在子组件中定义props属性,transmitData的type可以自定义类型(但是必须和父组件中的数据类型一致,否则会报错),default是默认值。

 

情况二:子组件要给父组件传值方法,使用$emit

子页面:a.vue

<template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">发送消息给爸爸</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            //1、childFn 组件方法名,父组件中用childFn方法接收子组件中的数据;2、message是传递给父组件的数据
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

第一步:this.$emit("方法名","传递给父组件的数据")

 父页面:b.vue
<template>
    <div>
      <child-com @childFn="parentFn"></child-com>
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(childData) {
        this.message = childData;
      }
    }
}
</script>

第二步:父组件中注入子组件(此处代码中省略,如要参考请看情况一)

第三步:定义方法childFn(必须和子组件中方法名一致),parentFn定义可随意。

 

标签:vue,transmitData,default,export,组件,message,传值
From: https://www.cnblogs.com/callbin/p/16963556.html

相关文章

  • vue2 中实现全局事件组件通信
    Date:2022-11-1117:38:37Author:gavin目的:实现兄弟组件数据传输First:insertbelowcodeSecond:发布事件,aSecond:订阅事件,a识别一个好的前端开源项目的方法......
  • Vue 实时获取屏幕宽高
    exportdefault{name:'page-index',data(){return{windowWidth:document.documentElement.clientWidth,//实时屏幕宽度......
  • vue el-input只能输入正整数 替换e - + 等
      示例:输入分页页数,每页显示条数<el-inputtype="number"class="resNums"v-model="item.resNums":min="1":max="500"step="10"placeholder="结果显示条数"onK......
  • web技术分享| 图片上传与图片裁剪结合 vue3
    需求:上传的图片限制长宽相同;只能上传图片;图片大小限制500k当前项目仅需要上传的图片信息项目组件使用裁剪:vue-cropperimport"vue-cropper/dist/index.c......
  • Vue基本语法
    v-bind我们成功创建了第一个Vue程序,看起来跟渲染一个字符串模板非常类似。但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联,所有东西都是响应式的。我们在......
  • vue i18n _ctx.$t is not a function
     一、问题Uncaught(inpromise)TypeError:_ctx.$tisnotafunctionatSelect.vue:51:95atrenderFnWithContext(runtime-core.esm-bundler.js:852:21)......
  • 手写vue-router核心原理
    最近也在观察vue3新特性,抽空玩一玩嵌套路由的vue-router,直接上代码项目目录结构代码展示app.vue<template><divid="app"><div><router-linkto="/"......
  • 创建Vue项目
    前期准备:安装node.js(node-v检查是否安装)安装vue-cli脚手架(使用淘宝镜像,然后运行npminstall-gvue-cli安装脚手架,vue-V检查是否安装)一、基本创建项目操作1、初始......
  • 使用vue深度选择器修改ElementUI组件内样式
    例子:el-collapse标签修改子组件样式在带有scoped属性的style中书写样式时,无法作用影响到子组件中的样式,此时我们会使用到deep深度选择器,来解决此问题,我们在使用less预处理......
  • vscode中引用vue3时红色提示
    从GitHub上下载了一个前端项目学习,用vscode打开。“vue3+vite”在vscode控制台执行npminstall,安装所需要的各种包。这个时候可以用npmrundev,启动项目。但是vs......