vue组件中的信息传递
父组件传递数据给子组件
-
子组件不能直接使用父组件中的数据。
父组件可以通过
props
属性向子组件传值
。
传递数据的方法：
- 在父组件中通过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="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<component1 v-bind:parent-msg="msg"></component1>
</div>
<template id="myTemplate">
<p>
子组件使用：{{ parentMsg }}
</p>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "我是父组件的数据",
},
methods: {},
components:{
// 不允许使用驼峰
component1:{
// 选择对应模板ID
template: "#myTemplate",
// 使用props来接收传过来的数值
props:["parentMsg"],
data(){
return{}
},
}
}
})
</script>
</body>
</html>
这里需要注意的点：
- 在父组件传递过来的数据是只有可读属性的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。
- 在命名子组件名称时不能使用驼峰命名。
- 子组件里的data数据是和props里面的数据是不一样的，data里面的数据是子组件私有的，而props里面的数据是父组件传递过来的。
父组件将方法传递给子组件
- 父组件通过事件绑定机制，将父组件的方法传递给子组件
传递方法
- 在父组件中使用v-on/@自定义名=“要传递的方法”
- 在子组件中不需要去直接接收，通过子组件自定义方法去调用
- 在自定义方法中写入this.$emit(“自定义名”);
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../SASS/tailwind.css">
</head>
<body>
<div id="app">
<!--在父组件中使用v-on/@自定义名="要传递的方法"-->
<component1 @parent-show="fatherClick"></component1>
</div>
<template id="myTemplate">
<button @click="sonClick">
点击
</button>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {
fatherClick(){
console.log("我是父组件的点击事件");
}
},
components:{
// 不允许使用驼峰
component1:{
// 选择对应模板ID
template: "#myTemplate",
// 使用props来接收传过来的数值
props:[],
data(){
return{}
},
methods: {
sonClick(){
<!--在自定义方法中写入this.$emit("自定义名");-->
this.$emit("parent-show")
}
}
}
}
})
</script>
</html>
以上仅供参考。
版权声明：本文为xiaoChenPengYou原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。