.orange { color: rgba(255, 165, 0, 1) }

Vue3.0 props

1.你是否遇到了,引用props数据报错的问题?

在Vue3.0中,采用了proxy,让很多数据不能直接引用,多的不说直接上解决方法

首先引入toRefs import { toRefs } from "vue";
props:{
str:String,
obj:Object,
num:Number
}
setup(props){
//让后在setup中将用toRefs把props转化成被ref包裹的数据
const { str, obj} = toRefs(props); //这样你就可以在setup中使用str 和 obj两个值了
let mystr = str.value;
let myobj = obj.value;
//记住使用时要用 .value ; return {
props
}
}

2.实现父子组件数据双向绑定,可以双向修改

在父组件中

//template部分

<template>
<sin-table @handleGetData = "getData" :fatherData="fatherData" />
//通过vue数据传递原理把fatherData传给子组件
</template>

//script部分

import {ref} from "vue"
setup(){
let fatherData = ref('');
const getData = (data) => {
fatherData.value = data; //这里是通过子组件传过来的数据修改fatherData;
}
}

在子组件中

//script部分

props:{ fatherData:String }
setup(props,ct) { const changeChildData = (childData) = { //通过emit把childData传给父组件
ct.emit("handleGetData",childData);
//这样就实现了,父子组件的双向数据绑定 } return { props }
}

如果fatherData为Object数据,内部子集内容可以直接在子组件中修改,或通过v-model修改

例如:
import {toRefs} from "vue";
props:{ fatherData:Object };
setup(){
const {fatherData} = toRefs(props);
fatherData.value[0].name = '新狗';
return {
props
}
}

vue3.0 props的更多相关文章

  1. 预计2019年发布的Vue3.0到底有什么不一样的地方?

    摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...

  2. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  3. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  4. 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  5. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  6. 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )

    vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study  ...

  8. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  9. vue3.0 加载json的“另类”方法(非ajax)

    问题 加载json一定要用ajax的方式吗? 最近学习vue3.0,在实现一个功能的时候发现一个问题-- 写代码的时候,需要的json太长.太多,和代码放在一起太混乱.看代码总有翻来翻去,又没有&qu ...

随机推荐

  1. 3.PHP条件语句及其字符串相关函数

    PHP条件语句 <?php    $number = rand(1,100);    if($number % 2 == 0){        echo "%2";    } ...

  2. Windbg 字符串条件断点

    0x01 前言 Windbg 作为 Windows 下的主流调试器,除了人机交互相比其他调试器略有不足外,其他功能都是十分强大的存在. 在所有的调试器中断点功能都是必不可少的,Windbg 可以使用 ...

  3. 0901-生成对抗网络GAN的原理简介

    0901-生成对抗网络GAN的原理简介 目录 一.GAN 概述 二.GAN 的网络结构 三.通过一个举例具体化 GAN 四.GAN 的设计细节 pytorch完整教程目录:https://www.cn ...

  4. 【python】Leetcode每日一题-不同的子序列

    [python]Leetcode每日一题-不同的子序列 [题目描述] 给定一个字符串 s 和一个字符串 t ,计算在 s 的子序列中 t 出现的个数. 字符串的一个 子序列 是指,通过删除一些(也可以 ...

  5. Could not contact [localhost:8005]. Tomcat may not be running.

    出错环境介绍: Tomcat-version:8.5.56 JDK-version:1.8.0_152 Linux:CentOS-7 错误信息 sh /opt/apache-tomcat-8.5.56 ...

  6. 初始化mysql报错bin/mysqld: error while loading shared libraries: libaio.so.1: cannot open shared object file: No such file or directory

    原因:缺少libaio.so.1 解决办法:安装即可 yum install -y libaio

  7. 操作系统中的进程同步与Window中利用内核对象进行线程同步的关系

    操作系统中为了解决进程间同步问题提出了用信号量机制,信号量可分为四种类型分别是互斥型信号量,记录型信号量,AND型信号量,信号量集. 互斥型信号量 互斥型信号量是资源数量为1的特殊的记录型信号量.表示 ...

  8. Java学习之jackson篇

    Java学习之jackson篇 0x00 前言 本篇内容比较简单,简单记录. 0x01 Json 概述 概述:JSON(JavaScript Object Notation, JS 对象简谱) 是一种 ...

  9. OOP第一章总结

    经过了三周的OO,尽管过程不太轻松,但是有所得还是值得欣慰的事! (1)程序结构 第一次作业: UML类图如下,第一次作业在结构上并没有太多面向对象的思想,只是简单的分类,一个运行类,两个对象类,预处 ...

  10. I/O流以及文件的基本操作

    文件操作: 文件操作其实就是一个FIle类:我们学习文件操作就是学习File类中的方法: 文件基操: 第一部分:学习文件的基本操作(先扒源码以及文档) Constructor Description ...