一、父组件向子组件传递数据(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. C# TimeSpan 时间计算

    原文:C# TimeSpan 时间计算 本文告诉大家简单的方法进行时间计算. 实际上使用 TimeSpan 可以做到让代码比较好懂,而代码很简单. 例如我使用下面的代码表示 5 秒 const int ...

  2. 使用nodejs 来压缩整个目录

    var fstream = require('fstream'), tar = require('tar'), zlib = require('zlib'); fstream.Reader({ 'pa ...

  3. Android app设置全屏模式

    Android中,为APP设置全屏模式,主要有如下几种方式: 在manifest中设置 在项目中找到AndroidManifest.xml配置文件,找到Activity所在的节点,添加theme. & ...

  4. 使用MVVM DataTemplate在WPF XAML视图之间切换

    原文 使用MVVM DataTemplate在WPF XAML视图之间切换 更新:这个技术的改进版本,一个不创建视图,可以在以下链接找到: http://www.technical-recipes.c ...

  5. Leetcode 94 Binary Tree Inorder Traversal 二叉树

    二叉树的中序遍历,即左子树,根, 右子树 /** * Definition for binary tree * struct TreeNode { * int val; * TreeNode *lef ...

  6. 在WPF中添加3D特性

    原文:在WPF中添加3D特性 35.4  在WPF中添加3D特性 本节介绍WPF中的3D特性,其中包含了开始使用该特性的信息. 提示: WPF中的3D特性在System.Windows.Media.M ...

  7. 张汝京:CIDM模式进可攻、退可守,建议尝试

    飞象网讯(路金娣/文)大约30多年前一些美国.日本和欧洲的IDM半导体工厂把多余的产能出来做代工服务,因为代工的公司不会与客户竞争,所以专业代工的模式成为半导体市场的新宠.那么,究竟国内半导体行业更加 ...

  8. 极简代码(七)—— SNR

    10⋅log10∑x=1Nx∑y=1Nyf2(x,y)∑x=1Nx∑y=1Ny(f(x,y)−f^(x,y))2 这里不妨先用 matlab 所支持的函数对象(函数式编程)定义这样一个函数变量,可作为 ...

  9. 好用的Markdown 编辑器及工具

    Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,所以通过同一个名字它可以使用工具来转换成 HTML.readme 文件,在线论坛编写消息和快速创建富文本 ...

  10. WPF 绑定父类属性

    原文:WPF 绑定父类属性 1.绑定父控件的属性. <ContextMenu x:Key="ContextMenuColoum"> <MenuItem Heade ...