vue示例
此文档包含Vue，React和小程序示例
首先说一下三者在父子组件传值的异同点，语法上三者在父级向子级传递过程中都使用的是props，父级定义内容，子级进行接收。而在子级向父级进行传递过程中有些许不同：
- 小程序：通过triggerEvent事件触发父级在子组件身上定义的事件，并且传值过程中要传递一个object对象，所有要传递的内容都写进对象里，父组件通过函数中的e.detail来进行定向接收。
- vue：通过$emit来触发父级在子组件身上定义的事件，但可以在后面自定义多个要传递的参数，示例:
this.$emit("事件名","123","456")
接收：
事件名(value1,value2){
console.log(value1,value2)
}
- react:没有一个指定的方法来触发父级写在组件身上的事件，通过this.props.父级写在组件身上的事件即可，内容可传字符串也可以传递对象
Vue
父组件——index.vue
我是爸爸
大儿子告诉我:{{message}}
子组件1——test1
组件1
爸爸跟我说的话,{{toast}}
子组件2——test2
组件2
爸爸跟我说的话,{{toast}}
哥哥跟我说的话：{{brotherTell1}}{{brotherTell2}}
小程序
父级——index
index.wxml文件
我今年已经{{age}}岁了
index.js文件
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
age:1,
aribo: 'Hello zhao'
},
onLoad: function () {
},
addAge:function(e){
let num = 0;
num = this.data.age + e.detail.num;
this.setData({
age: num
})
},
changeName:function(e){
this.setData({
aribo:e.detail.name
})
}
})
index.json文件
{
"usingComponents":{
"test":"/components/test/test",
"test2":"/components/test2/test2"
}
}
子组件1
test.wxml文件
我是从父组件过来的---{{name}}
test.js文件
// components/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
name:{
type:String,
value:'111'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
click:function(data){
let num = {
num:1
}
this.triggerEvent('add',num)
},
change:function(){
let data = {
name:'Hello liu'
}
this.triggerEvent('change',data)
}
}
})
test.json
{
"component": true,
"usingComponents": {}
}
子组件2
test2.html
我是test2文件,我的名字是{{name}}
test2.js
// components/test2/test2.js
Component({
/**
* 组件的属性列表
*/
properties: {
name:{
type:String,
value:''
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
test2.json
{
"component": true,
"usingComponents": {}
}
react
父级——app.js文件
import React, { Component } from 'react';
import './App.css';
import Child1 from './components/child1'
import Child2 from './components/child2'
class App extends Component {
constructor(){
super();
this.state = {
talkTo1:'你是咱家老大',
talkTo2:'你是咱家老二',
childToMeMessage:'',
tell:''
}
}
childToMe(message){
this.setState({
childToMeMessage:message
})
}
child2ToChild1(message){
this.setState({
tell:message
})
}
render() {
const talkTo1 = "你是咱家老大"
const talkTo2 = "你是咱家老二"
return (
我是爸爸
大儿子跟我说：{this.state.childToMeMessage}
我是大儿子
我是小儿子
子组件1——child1.js
import React , {Component} from 'react';
import PropTypes from 'prop-types';
export default class Child1 extends Component{
constructor(props){
super(props);
this.state ={
talkToFather:'好好照顾身体'
}
}
talkToFather(){
this.props.toFather(this.state.talkToFather)
}
render() {
return (
爸爸告诉我：{this.props.talk}
弟弟告诉我：{this.props.tell}
);
}
}
Child1.PropTypes = {
talk:PropTypes.string
}
子组件2——child2.js
import React , {Component} from 'react';
import PropTypes from 'prop-types';
export default class Child2 extends Component{
constructor(props){
super(props);
this.state ={
talkToBrother:'要好好学习啊'
}
}
talkToBrother(){
this.props.toBrother(this.state.talkToBrother)
}
render() {
return (
爸爸告诉我：{this.props.talk}
);
}
}
Child2.PropTypes = {
talk:PropTypes.string
}
文章涉及的Vue文件内容使用vue-cli脚手架搭建，React内容使用Create-app-react搭建，小程序使用原生
代码详细内容参见github