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
<template>
<div class="hello">
<div>
<p>我是爸爸</p>
</div>
<div>
大儿子告诉我:{{message}}
</div>
<test1 :toast="talkToTest1" @tell = "tellfather" @tellBrother = "telldidi"> </test1>
<test2 :toast="talkToTest2" :brotherTell1="message2" :brotherTell2="message3"></test2>
</div>
</template>
<script>
import test1 from "../common/test1";
import test2 from "../common/test2";
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
talkToTest1:"你是咱家老大",
talkToTest2:"你是咱家老二",
message:'',
message2:'',
message3:'',
};
},
components: {
test1,
test2
},
methods:{
tellfather(message){
this.message = message
},
telldidi(message1,message2){
this.message2 = message1
this.message3 = message2
}
}
};
</script>
子组件1——test1
<template>
<div>
组件1 <br>
爸爸跟我说的话,{{toast}} <br>
<button @click="tell">告诉爸爸</button>
<button @click="tellBrother">告诉弟弟</button>
</div>
</template>
<script>
export default {
props:[
'toast'
],
data(){
return{
message:'好好照顾身体',
message2:'好好学习',
message3:'天天向上',
}
},
methods:{
tell(){
this.$emit('tell',this.message)
},
tellBrother(){
this.$emit("tellBrother",this.message2,this.message3)
}
}
}
</script>
子组件2——test2
<template>
<div>
组件2 <br>
爸爸跟我说的话,{{toast}} <br>
哥哥跟我说的话：{{brotherTell1}}{{brotherTell2}}
</div>
</template>
<script>
export default {
props:[
'toast','brotherTell1','brotherTell2'
],
data(){
return{
}
}
}
</script>
小程序
父级——index
index.wxml文件
<!--index.wxml-->
<view class="container">
<test name="{{motto}}" bind:change="changeName" bind:add="addAge"></test>
<text>我今年已经{{age}}岁了</text>
<test2 name="{{aribo}}"></test2>
</view>
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文件
<!--components/test.wxml-->
<text>我是从父组件过来的---{{name}}</text>
<button bindtap='click'>加年龄</button>
<button bindtap='change'>改名字</button></pre>
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
<!--components/test2/test2.wxml-->
<text>我是test2文件,我的名字是{{name}}</text>
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 (
<div className="container">
<div className="row">
<div className="col-md-4">
<h2>我是爸爸</h2>
<p>大儿子跟我说：{this.state.childToMeMessage}</p>
</div>
<div className="col-md-4">
<h2>我是大儿子</h2>
<Child1 tell={this.state.tell} talk={this.state.talkTo1} toFather={this.childToMe.bind(this)}></Child1>
</div>
<div className="col-md-4">
<h2>我是小儿子</h2>
<Child2 talk={this.state.talkTo2} toBrother={this.child2ToChild1.bind(this)}></Child2>
</div>
</div>
</div>
);
}
}
export default App;
子组件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 (
<div className="container">
<p>爸爸告诉我：{this.props.talk}</p>
<button className="btn btn-default" onClick={this.talkToFather.bind(this)}>我要跟爸爸说</button>
<p>弟弟告诉我：{this.props.tell}</p>
</div>
);
}
}
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 (
<div className="container">
<p>爸爸告诉我：{this.props.talk}</p>
<button onClick={this.talkToBrother.bind(this)} className="btn btn-info">我要跟哥哥说</button>
</div>
);
}
}
Child2.PropTypes = {
talk:PropTypes.string
}
文章涉及的Vue文件内容使用vue-cli脚手架搭建，React内容使用Create-app-react搭建，小程序使用原生
代码详细内容参见github
网友评论