vue学习笔记
子组件获取父组件数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父组件向子组件通讯title>
head>
<body>
<div id="app">
<father>father>
div>
<template id="father">
<div>
{{fatherData}}
<son :fatherdata='fatherData'>son>
div>
template>
<template id="son">
<div>
{{sondata}} - {{fatherdata}}
div>
template>
<script src="js/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
components: {
'father': {
template: '#father',
data() {
return {
fatherData: '我是父组件数据',
}
},
components: {
'son': {
template: '#son',
data() {
return {
sondata: '我是子组件数据',
}
},
props: ['fatherdata'],
// 连字符对应修改成驼峰
// props: ['fatherData'],
}
}
},
}
})
script>
body>
html>
运行结果:
父组件获取子组件数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子组件向父组件通讯title>
head>
<body>
<div id="app">
<father>father>
div>
<template id="father">
<div>
{{fatherData}} - {{sonData}}
<son @getsondata='getSonData'>son>
div>
template>
<template id="son">
<div>
{{sonData}}
div>
template>
<script src="js/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
components: {
'father': {
template: '#father',
data() {
return {
fatherData: '我是父组件数据',
sonData: '',
}
},
methods: {
getSonData(value) {
this.sonData = value;
}
},
components: {
'son': {
template: '#son',
data() {
return {
sonData: '我是子组件数据'
}
},
mounted() {
// 通过this.$emit()发送数据
this.$emit('getsondata',this.sonData)
}
}
}
}
}
});
script>
body>
html>
运行结果:
兄弟组件互传数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兄弟组件的通讯title>
head>
<body>
<div id="app">
<component1>component1>
<component2>component2>
div>
<template id="mylarge">
<div>
{{mylarge}} - {{mysmall}}
<button @click='largeTosmall'>将哥哥数据传给弟弟button>
div>
template>
<template id="mysmall">
<div>
{{mysmall}} - {{mylarge}}
<button @click='smallTolarge'>将弟弟数据传给哥哥button>
div>
template>
<script src="js/vue.js">script>
<script>
// 借用一个空的vue对象,进行兄弟组件间的数据通讯
let event = new Vue({});
let vm = new Vue({
el: '#app',
components: {
'component1': {
template: '#mylarge',
data() {
return {
mylarge: '我是哥哥的数据',
mysmall: ''
}
},
mounted() {
event.$on('getmysmalldata',value=> {
this.mysmall = value;
})
},
methods: {
largeTosmall() {
event.$emit('getmylargedata',this.mylarge);
}
}
},
'component2': {
template: '#mysmall',
data() {
return {
mysmall: '我是弟弟的数据',
mylarge: ''
}
},
mounted() {
event.$on('getmylargedata',value=> {
this.mylarge = value;
})
},
methods: {
smallTolarge() {
event.$emit('getmysmalldata',this.mysmall);
}
}
}
}
});
script>
body>
html>
运行结果:
--------
-------
未完,待续...