父子组建传值_父子组件及兄弟组件传值demo
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}}
?
?
?
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
?
}
?
}
?
};
?
子組件1——test1
組件1
爸爸跟我說的話,{{toast}}
告訴爸爸
告訴弟弟
export default {
props:[
'toast'
],
data(){
return{
message:'好好照顧身體',
message2:'好好學習',
message3:'天天向上',
}
},
methods:{
tell(){
this.$emit('tell',this.message)
},
tellBrother(){
this.$emit("tellBrother",this.message2,this.message3)
}
}
}
子組件2——test2
組件2
爸爸跟我說的話,{{toast}}
哥哥跟我說的話：{{brotherTell1}}{{brotherTell2}}
export default {
props:[
'toast','brotherTell1','brotherTell2'
],
data(){
return{
?
}
}
}
小程序
父級——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}
我是大兒子
我是小兒子
);
}
}
?
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 (
爸爸告訴我：{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
總結
以上是生活随笔為你收集整理的父子组建传值_父子组件及兄弟组件传值demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 模型与logit_基础方法 | 如何用L
- 下一篇： pbr 多出口_PBR+多出口NAT+I