一、父组件向子组件传递数据(props)

<template>
<view class="container" style="background: #0062CC;"> <view class="child"> hi {{showModal}}</view>
</view>
</template> <script>
export default {
props: {
showModal: {
type: String,
default: 'hello'
}
}, data() {
return { };
},methods:{ }
}
</script> <style> </style>

child

<template>
<view>
<child :showModal="showModal"></child> </view>
</template> <script>
import child from "../../components/child.vue" export default {
components: {
child
},
data() {
return {
showModal: " parent say"
};
},
methods: { }
}
</script> <style> </style>

parent

二、子组件向父组件传递数据(emit)

<template>
<view>
<child :showModal="showModal" @changes="childClick"></child>
<view>{{parentValue}}</view>
</view>
</template> <script>
import child from "../../components/child.vue" export default {
components:{
child
},
data() {
return {
showModal:" parent say",
parentValue:''
};
},methods:{
childClick(e){
console.info(e);
this.parentValue=e;
} }
}
</script> <style> </style>

parent

<template>
<view class="container">
<button @tap="childClick" >点击我 </button>
<view class="child"> hi {{showModal}}</view>
</view>
</template> <script>
export default {
props: {
showModal: {
type: String,
default: 'hello'
}
}, data() {
return {
childdata:'child value'
};
},methods:{
childClick(){
console.info(this.childdata);
this.$emit("changes",this.childdata); } }
}
</script> <style> </style>

child

三、子组件与父组件数据同步(.sync)

<template>
<view class="container" style="background: #0062CC;">
<button @tap="childClick" >点击我 </button>
<view class="child"> hi {{showModal}}</view>
<view>psync同步(child):{{syncDate}}</view>
</view>
</template> <script>
export default {
props: {
showModal: {
type: String,
default: 'hello'
},
syncDate: {
type: String,
default: 'hello'
}
}, data() {
return {
childdata:'child value'
};
},methods:{
childClick(){
console.info(this.childdata);
this.$emit("changes",this.childdata); } }
}
</script> <style> </style>

child

<template>
<view>
<child :syncDate.sync='syncDate' :showModal="showModal" @changes="childClick"></child> <view class="parent" style="background: #09BB07;">
<view>emit传值:{{parentValue}}</view>
<input :value="syncDate" v-model="syncDate" style="background: #808080;" />
<view>psync同步(parent):{{syncDate}}</view>
</view>
</view>
</template> <script>
import child from "../../components/child.vue" export default {
components: {
child
},
data() {
return {
showModal: " parent say",
parentValue: '',
syncDate: ' p syncDate'
};
},
methods: {
childClick(e) {
console.info(e);
this.parentValue = e;
} }
}
</script> <style> </style>

parent

uni-app中vue组件父子值传递的更多相关文章

  1. vue组件之间值传递四种方法汇总

    1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }} ...

  2. Java中不得不谈的值传递和地址传递

    个人的一些认识,希望能对初学Java的你,或者困惑于方法参数传递的你祈祷一丝帮助! 下面是一些作者的个人观点,如果有错,欢迎各位大牛指出错误,灰常感谢您的观看与支持... -------------- ...

  3. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  4. vue组件父子组件传递引用类型数据

    今天在写分页功能时,发现父子组件传值时,子组件监听不到父组件中数据的变化,传递的是一个引用类型的数据 其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听不到变化,此时就需要做一个 ...

  5. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  6. 第七十四篇:Vue组件父子传值

    好家伙, 1.组件之间的关系 在项目开发中,组件之间的最常见关系分为如下两种: (1)父子关系 (2)兄弟关系 2.父子之间的数据共享 (1)父->子共享数据 父组件向子组件共享数据需要使用自定 ...

  7. vue 组件之间数据传递(七)

    1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

  8. vue组件父子间通信之综合练习--假的聊天室

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Java中传参的值传递和引用传递问题(转)

    今天遇到了一个java程序,需要用参数来返回值(虽然最后用另一种方法实现了),在网上看到这样一篇文章,很受启发. 本文章来自于http://hi.baidu.com/xzhilie/blog/item ...

随机推荐

  1. Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)

    Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性 <!DOCTYPE html> <html> ...

  2. 本机Ajax异步通信

    昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信.为了更好的编织知识网,今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信. 原生Ajax实现异步 ...

  3. Scripting web services

    A process performed on a server includes configuring the server to enable script for a Web service t ...

  4. Virtualization of iSCSI storage

    This invention describes methods, apparatus and systems for virtualization of iSCSI storage. Virtual ...

  5. C#中的SMTP配置Outlook.Com SMTP主机

    如果你想以编程方式使用    Outlook.com或Gmail帐户作为    SMTP主机    发送电子邮件,也有为了得到这一切工作的几件事情要注意. 使用基本的System.Net.Mail库, ...

  6. Leetcode 268 Missing Number 位运算

    题意:先将0, 1, 2, ..., n放入数组,然后去掉其中一个值,找到那个值. 这题与singe number 是一个类型,变形的地方就是首先需要将0, 1, 2, ..., n再次放入这个数组, ...

  7. WinEdt && LaTex(三)—— 宏包

    amsmath:最常用的数学宏包 1. bm:bold math 数学字体加粗 \documentclass{article} \usepackage{bm} \begin{document} \[ ...

  8. WPF字体图标——IconFont

    原文:WPF字体图标--IconFont 版权声明:本文为[CSDN博主:松一160]原创文章,未经允许不得转载. https://blog.csdn.net/songyi160/article/de ...

  9. Android数组和开发List之间的转换

    1.List转换到一个数组.(这里List它是实体是ArrayList) 转让ArrayList的toArray方法. toArray public <T> T[] toArray(T[] ...

  10. aspnetboilerplate && .net core 使用原生sql

    利用aspnetboilerplate提供的工具类IDbContextProvider private readonly IDbContextProvider<XXXDbContext> ...