vue父组给子子组件传html,Vue19 父组件向子组件传值.html

父组件向子组件传值 | 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

原始数据

按行查看

历史