组件的通讯
2019-09-26 本文已影响0人
疯狂的蜗牛Dianna
父子间访问子组件之间的信息(父传子)
子组件访问父组件之间的信息(子传父)
兄弟之间的传递(子传子)
父传子
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :msg="num"></child>
</div>
<!-- 父传子 -->
</body>
<script>
Vue.component('child', {
template: '<h1>我是小陈陈{{msg}}</h1>',
props: ['msg']
});
var vm = new Vue({
el: '#app',
data: {
num: 100
},
methods: {}
});
</script>
</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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child @fn="pfn"></child>
</div>
</body>
<script>
// 子组件
Vue.component('child', {
template: '<h1>我是一个组件</h1>',
data() {
return {
cmsg: 100
}
},
created() {
this.$emit('fn', this.cmsg);
}
});
// 父组件
var vm = new Vue({
el: '#app',
data: {},
methods: {
pfn(res) {
console.log(res);
}
},
});
// function test(callback) {
// const msg = '子组件的信息'
// callback(msg)
// }
// test(function (res) {
// console.log(res);
// });
</script>
</html>
props接收的属性是只读,不允许你修改
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :num="msg" :List="list"></child>
</div>
</body>
<script>
// 子
Vue.component('child', {
template: '<h1>这是一个子组件{{num}}</h1>',
props: ['num'],
created() {
// this.num = '修改了';
this.list = [];
}
});
// 父
var vm = new Vue({
el: '#app',
data: {
msg: 100,
list: ['小陈陈', '小肥肥'],
},
methods: {}
});
</script>
</html>
