菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >运维 >

vue 父子传值 方法大全

vue 父子传值 方法大全

一、通过props传递数据父页面子页面二、子控件给父控件传递值父页面子页面三、插槽slot四、vuex

一、通过props传递数据

只能是父控件传递给子控件

父页面

<template><div id="app"><!-- <HelloWorld1 width="400" height="500" arr="[1,2,3,4,5]" /> --><HelloWorld1 width=1 height="500" :arr="arr11" ></HelloWorld1></div></template><script>import HelloWorld1 from "./HelloWorld1";export default {data(){return{arr11:[1,2,3,4,5]}},components: {HelloWorld1}};</script>

子页面

<template><div>子控件获取到的值:<br />{{ width }}<br />{{ height }}<br />{{arr}}</div></template>><script>export default {props: {width: {//接受类型type: String,//false 可以为空 .true 不能为空 报错但不影响显示required: false,//默认值default: "800",},height: {//接受类型(多种类型)type: [Number, String],},arr: {type: Array,required: true,},},};</script>

二、子控件给父控件传递值

父页面

<template><div id="app">点击按钮我就从500变成了800<br/> {{width}}<hr><HelloWorld1 @myChange111="dochange" /></div></template><script>import HelloWorld1 from "./HelloWorld1";export default {name: 'App',data(){return{width:500}},methods:{dochange(val){this.width=val;}},components: {HelloWorld1}}</script>

子页面

<template><div><button @click="dochange()">ahahha</button></div></template><script>export default {data() {return {};},methods: {dochange() {this.$emit("myChange111", 800);},},};</script>

三、插槽slot

vue 插槽的使用

四、vuex

vuex 简单的 state与mutations 操作

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。