vue组件之间的传值方式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.父组件向子组件传值方式

1.1父组件向子组件传数据方式

// 那么子组件怎么获取到父组件的数据：父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，子组件通过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="vue.js"></script>
</head>
<body>
<div id="app">


<com1 v-bind:parentmsg="msg"></com1>
</div>
<script> var vm=new Vue({
el:'#app',
data:{
msg:'123==啊父组件中的数据'
},
methods: { },
// 定义一个私有子的组件
components: {
// 来看下子组件能拿到vm父组件中的data里面的msg数据吗
// 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法
// 那么子组件怎么获取到父组件的数据
com1:{
data(){
// 注意：子组件中的data数据，并不是父组件传递过来的，而是子组件自身私有的，比如：子组件子组件通过ajax，
// 请求回来的数据，都可以放在data身上
return{
title:'123',
content:'qqq'
}
},
template:'<h1>这是子组件--{{parentmsg}}</h1>',
// 注意：组件中的所有props中的数据,都是通过父组件传递给子组件的
// 注意子组件中的data和props数据的区别：props只读，无法重新赋值，data数据都是可读可写
// props是一个数组，把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
props: ['parentmsg'] }
}
})
</script>
</body>
</html>

1.2父组件向子组件传递方法，使用的是事件绑定机制，子组件通过$emit（）方法拿到父组件传过来的数据

<!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="vue.js"></script>
</head>
<body>
<div id="app">



<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// emit触发
this.$emit('funcs')
}
}
}
var vm=new Vue({
el:'#app',
data:{
show(){
console.log('调用了父组件上的show方法')
}
},
methods: { },
components: {
com2
// 类似于 com2:com2 }
})
</script>
</body>
</html>

二.子组件向父组件传值

子组件向父组件传值成功
总结一下：
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

调用父组件的方法，并向父组件传参数

<!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="vue.js"></script>
</head>
<body>
<div id="app">



<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// 从第二个参数开始进行传参数
this.$emit('func',123)
}
}
}
var vm=new Vue({
el:'#app',
data:{
show(data){
console.log('调用了父组件上的show方法------'+data)
}
},
methods: { },
components: {
com2
// 类似于 com2:com2 }
})
</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="vue.js"></script>
</head>
<body>
<div id="app">



<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick">
</div>
</template>
<script>
// 定义一个字面量类型的组件模板对象
var com2={
// 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构
template:'#tmp1',
data(){
return{
sonmsg:{
name:'小头儿子',
age:6
}
}
},
methods:{
myclick(){
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法
// 从第二个参数开始进行传参数
// this.$emit('func',123)
this.$emit('func',this.sonmsg)
}
}
}
var vm=new Vue({
el:'#app',
data:{
// 定义一个从儿子那里拿过来的数据
datamsgFromSon:null
},
methods: {
show(data){
// console.log('调用了父组件上的show方法------'+data)
console.log(data)
this.datamsgFromSon=data;
console.log(this.datamsgFromSon)
}
},
components: {
com2
// 类似于 com2:com2 }
})
</script>
</body>
</html>