Vue.js⽗组件向⼦组件传值和⼦组件向⽗组件传值⽗组件向⼦组件传值
1. 组件实例定义⽅式，注意：⼀定要使⽤props属性来定义⽗组件传递过来的数据
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是⽗组件中的消息'
},
components: {
son: {
template: '<h1>这是⼦组件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
2. 使⽤v-bind或简化指令，将数据传递到⼦组件中：
<div id="app">
<son :finfo="msg"></son>
</div>
<!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="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- ⽗组件，可以在引⽤⼦组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给⼦组件的数据，以属性绑定的形式，传递到⼦组件内部，供⼦组件使⽤ -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '123 啊-⽗组件中的数据'
},
methods: {},
components: {
/
/ 结论：经过演⽰，发现，⼦组件中，默认⽆法访问到⽗组件中的 data 上的数据和 methods 中的⽅法
com1: {
data() { // 注意：⼦组件中的 data 数据，并不是通过⽗组件传递过来的，⽽是⼦组件⾃⾝私有的，⽐如：⼦组件通过 Ajax ，请求回来的数据，都可以放到 data ⾝上；
// data 上的数据，都是可读可写的；
return {
title: '123',
content: 'qqq'
}
},
template: '<h1 @click="change">这是⼦组件 --- {{ parentmsg }}</h1>',
// 注意：组件中的所有 props 中的数据，都是通过⽗组件传递给⼦组件的
// props 中的数据，都是只读的，⽆法重新赋值
props: ['parentmsg'], // 把⽗组件传递过来的 parentmsg 属性，先在 props 数组中，定义⼀下，这样，才能使⽤这个数据
directives: {},
filters: {},
components: {},
methods: {
change() {
this.parentmsg = '被修改了'
}
}
}
}
});
</script>
</body>
</html>
⼦组件向⽗组件传值
1. 原理：⽗组件将⽅法的引⽤，传递到⼦组件内部，⼦组件在内部调⽤⽗组件传递过来的⽅法，同时把要发送给⽗组件的数据，在调⽤
⽅法的时候当作参数传递进去；
2. ⽗组件将⽅法的引⽤传递给⼦组件，其中，getMsg是⽗组件中methods中定义的⽅法名称，func是⼦组件调⽤传递过来⽅法时候的⽅
法名称
<son @func="getMsg"></son>
3. ⼦组件内部通过this.$emit('⽅法名', 要传递的数据)⽅式，来调⽤⽗组件中的⽅法，同时把数据传递给⽗组件使⽤
<div id="app">
<!-- 引⽤⽗组件 -->
<son @func="getMsg"></son>
<!-- 组件模板定义 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向⽗组件传值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// ⼦组件的定义⽅式
Vueponent('son', {
template: '#son', // 组件模板Id
methods: {
sendMsg() { // 按钮的点击事件
this.$emit('func', 'OK'); // 调⽤⽗组件传递过来的⽅法，同时把数据传递出去
}
}
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // ⼦组件中，通过 this.$emit() 实际调⽤的⽅法，在此进⾏定义
alert(val);
}
}
});
</script>
<!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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!-- ⽗组件向⼦组件传递⽅法，使⽤的是事件绑定机制； v-on, 当我们⾃定义了⼀个事件属性之后，那么，⼦组件就能够，通过某些⽅式，来调⽤传递进去的这个⽅法了 -->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>这是⼦组件</h1>
<input type="button" value="这是⼦组件中的按钮 - 点击它，触发⽗组件传递过来的 func ⽅法" @click="myclick">
</div>
</template>
<script>
// 定义了⼀个字⾯量类型的组件模板对象
var com2 = {
template: '#tmpl', // 通过指定了⼀个 Id, 表⽰说，要去加载这个指定Id的 template 元素中的内容，当作组件的HTML结构
data() {
return {
sonmsg: { name: '⼩头⼉⼦', age: 6 }
}
},
methods: {
myclick() {
// 当点击⼦组件的按钮的时候，如何拿到⽗组件传递过来的 func ⽅法，并调⽤这个⽅法
//  emit 英⽂原意：是触发，调⽤、发射的意思
// this.$emit('func123', 123, 456)
this.$emit('func', this.sonmsg)
}
}
}
/
/ 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
datamsgFormSon: null
},
methods: {
show(data) {
// console.log('调⽤了⽗组件⾝上的 show ⽅法: --- ' + data)
// console.log(data);
this.datamsgFormSon = data
}
},
components: {
com2
// com2: com2
js获取json的key和value}
});
</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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论⼈： {{ item.user }}</span>
{{ t }}
</li>
</ul>
</div>
<template id="tmpl">
<div>
<div class="form-group">
<label>评论⼈：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">      </div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。