Vue组件传值之 父传子
程序员文章站
2022-06-19 13:07:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
//使用 ":" 也就是 v-band的方法把父组件的data属性传给子组件
<v-one :values="msg"></v-one>
</div>
<template id="temp1">
<div>
我是子组件的内容
//使用父传过来的data属性
{{values}}
</div>
</template>
<script src="../vue.js"></script>
*注意: 子组件不可以更改父组件中data属性的值
可以更改成功,但是会报错!
如果需要更改,父组件的data属性需要放在对象中传递
<script>
//下面是子组件:
var vOne = {
template: "#temp1",
},
// 用 : 也就是 v-band 方法传过来的data属性 要放在 props中 子组件才可以使用
props: ["values"]
}
```
//下面是父组件:
let vm = new Vue({
el: '#app',
data: {
msg: "父组件的属性"
},
},
components: {
vOne
}
});
</script>
</body>
</html>
本文地址：https://blog.csdn.net/Luceyyy/article/details/110209675