Vue 父子组件的通信
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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--父组件的使用-->
<h1>父组件--{{msg}}</h1>
<!--子组件的使用-->
<com1></com1>
</div>
<script>
// com1子组件
var com1 = {
template: "<h3>我是子组件--</h3>"
}
//Vue实例
var vm = new Vue({
el: "#app",
data: {
msg: "hello--我是父组件"
},
methods: {},
components:{
com1
}
})
</script>
</body>
</html>
vue实例中的data 中有msg,我们需要把这个 msg传值给 com1
1. 通过属性绑定 v-bind: 的方式
1.父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用
<!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="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件的使用-->
<h1>父组件的内容: {{msg}}</h1>
<!--子组件的使用-->
<hr>
<com1 v-bind:com-msg="msg"></com1>
</div>
<template id="com1">
<!--请注意组件必须只有一个 root标签-->
<div>
<h2>我是子组件</h2>
传递的信息: <span style="color: red">{{comMsg}}</span>
</div>
</template>
<script>
// com1 子组件
var com1 = {
template: "#com1",
props: {
comMsg: {
type: String, // 指定传值的类型
default() { //默认值
return undefined;
}
}
}
}
// 定义的 Vue实例
var vm = new Vue({
el: "#app",
data: {
msg: "hello--我是父组件"
},
methods: {},
components: {
com1
}
})
</script>
</body>
</html>
2.在子组件中有个 props 属性,该属性中保存的都是 父组件传递给子组件的数据,注意:props 中的数据,都是只读的,无法重新赋值, 但是prop属性可以指定 传值类型和默认值
-
在子组件中使用 props中的 父组件传给子组件的数据
在经过执行了完整代码后 ,获取到了父组件的 msg
二、子组件 传值给 父组件
准备页面
<!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="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件的使用-->
<h1>父组件的内容: {{msg}}</h1>
<!--子组件的使用-->
<hr>
<com1></com1>
</div>
<template id="com1">
<!--请注意组件必须只有一个 root标签-->
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
// com1 子组件
var com1 = {
template: "#com1",
props: {
comMsg: {}
}
}
// 定义的 Vue实例
var vm = new Vue({
el: "#app",
data: {
msg: "hello--我是父组件"
},
components: {
com1
}
})
</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="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件的使用-->
<h1>父组件的内容: {{msg}}</h1>
<!--子组件的使用-->
<hr>
<com1 v-on:func="show"></com1>
</div>
<template id="com1">
<!--请注意组件必须只有一个 root标签-->
<div>
<h2>我是子组件</h2>
comMsg的值:{{comMsg}} <br>
<input type="text" v-model="comMsg">
<input value="anniu " type="button" @click="myclick(comMsg)"></input>
</div>
</template>
<script>
// com1 子组件
var com1 = {
template: "#com1",
props: {
comMsg: {}
},
methods: {
myclick(data){
this.$emit('func',data);
}
}
}
// 定义的 Vue实例
var vm = new Vue({
el: "#app",
data: {
msg: "hello--我是父组件"
},
methods: {
show(data) {
this.msg = data
}
},
components: {
com1
}
})
</script>
</body>
</html>
这样的话 ,实现了 子组件向父组件传值的操作,但是这样不是很好
翻译一下也就是说 , vue 不提倡我们直接操作父组件的data,而是希望我们用计算属性
3.我们再来一个案例 我们也可以实现 将子组件的值给父组件
基础页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--父组件模板-->
<div id="app">
<!--引入子组件 定义一个on的方法监听子组件的状态-->
<cpn @item-click="cpnClick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<button v-for="item in games" @click="btnclick(item)">{{item.name}}</button>
</div>
</template>
<script>
//子组件
const cpn = {
template: '#cpn',
data() {
return {
message: '你好',
games: [
{id: '01', name: '刺激战场'},
{id: '02', name: '王者荣耀'},
{id: '03', name: '阴阳师'}
]
}
},
methods: {
btnclick(item) {
// item-click是在父组件on监听的方法
// 第二个参数item是需要传的值
this.$emit("item-click", item);
}
}
}
//父组件
const app = new Vue({
el: '#app',
data: {},
components: {
cpn
},
methods: {
cpnClick(item) { //发送事件,item 就是子组件传过来的值
console.log("cpnClick", item)
}
},
})
</script>
</body>
</html>
那么 父组件是怎么进行传递的呢?
ok…