vue 父组件向子组件传值,并且可以在子组件methods中拿到数据
父组件通过props传值给子组件,子组件在methods里要拿到父组件传递过来的数据有2种情况:一、父组件传递的参数是固定的,data里面定义的参数,这时候在子组件通过this.xxx就可以获取到<wang-editor class="wangEditor" :content-data="content"></wang-editor>data() {ret...
·
父组件通过props传值给子组件,子组件在methods里要拿到父组件传递过来的数据有2种情况:
一、父组件传递的参数是固定的,data里面定义的参数,这时候在子组件通过this.xxx就可以获取到
<wang-editor class="wangEditor" :content-data="content"></wang-editor>
data() {
return {
content: "父组件传递给子组件的值",
};
},
//子组件接收:
export default {
name: "Editor",
data() {
return {
};
},
props: ["contentData"], // 接收父组件的值
mounted() {
getfatherData(){
console.log(this.contentData) // 父组件传递给子组件的值
}
}
二、父组件传递的参数是动态改变的,这种在子组件里按照上面的方式是获取不到动态改变后的数据的。
方法1:用v-if 定义一个flag,初始为false,在动态改变了content的时候flag设置为true
<wang-editor class="wangEditor" :content="content" v-if="flag"></wang-editor>
data() {
return {
content: "", //父组件传递给子组件的值
flag:false, //想要传递给子组件的数据请求回来之后设置 flag = true
};
},
//子组件接收:
export default {
name: "Editor",
data() {
return {
};
},
props: ["content"], // 接收父组件的值
mounted() {
getfatherData(){
console.log(this.content)
}
}
方法2:在子组件用watch监听数据的变化
<wang-editor class="wangEditor" :content="content"></wang-editor>
data() {
return {
content: "", //父组件传递给子组件的值
};
},
//子组件接收:
export default {
name: "Editor",
data() {
return {
};
},
props: ["content"], // 接收父组件的值
mounted() {
getfatherData(){
console.log(this.content) // 父组件传递给子组件的值
}
},
watch:{
fatherData:function(newVal,oldVal){
this.content = newVal
}
}
}
注意命名要规范:
父组件里:子组件在父组件挂载时绑定数据,注意前面要以“-”连接,data中要以驼峰规则命名
参考文档:https://blog.csdn.net/weixin_40216826/article/details/80733160
更多推荐
已为社区贡献3条内容
所有评论(0)