父组件向子组件传值 | Vue.js
父组件中的 msg
:
var app = new Vue({
el: "#app",
data: {
msg: "父组件中的数据:123",
},
methods: {},
components: {
// 1. 经过实践测试 子组件中无法访问到父组件 data 中的数据 和 methods 中的方法
com1: { // 比 data 和 methods 低一级,所以相对来说是子组件
data(){ // 6. 这是子组件自己的数据,而非父组件给的,ATTENTION: 组件中的data是个方法
return {
title: 123,
content: "ABCDE"
}
},
template: "
这是一个子组件 -- {{parentmsg}}
", // 3.直接使用绑定的数据还无法使用// 5. 组件中 所有 props 中的数据,都是父组件传给子组件的
props: ["parentmsg"], // 4. 把父组件传递过来的 parentmsg 属性,现在props数组中定义
// props 中的数据对于子组件都是只读的,data中的则是可读可写
methods: {
change(){
this.parentmsg = "被修改了" // 控制台会报错,不允许子组件修改父组件信息,保证安全性
}
}
}
}
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史