vue子组件获取父组件的值,vue父组件获取子组件元素
本文主要介绍vue子组件获取的父组件的内容(props属性)，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
子组件如何获取父组件的内容属性vue Parent 子组件的属性传递值需求1需求2
子组件如何获取父组件的内容
props属性
组件的范围是独立的。这意味着父组件的数据不能也不应该在子组件的模板中被直接引用。您可以使用props将数据传递给子组件。
想要引用父组件需要：
BBV绑定：myMsg= msg /BBB//子组件将父组件的数据消息绑定到myMsg。
bbb:{
道具：{
“MyMsg”:String//绑定数据的类型
}
}
注意：道具也可以这样表达：道具：[mymsg]
完整实例如下：
！声明文档类型
超文本标记语言
头部语言
meta charset=UTF-8
标题/标题
script src=js/vue.js/script
/头
身体
div id=example
aaa/aaa
/div
模板id=aaa
H1{{msg}}/h1 //父组件
Bbb :my-msg=msg/bbb //子组件
/模板
脚本
window.onload=function(){
新Vue({
el: #example ，
数据：{
},
组件：{
aaa:{
数据：函数(){
返回{
消息：“我是父组件的数据”
}
},
模板： #aaa ，
组件：{
bbb:{
道具：{
myMsg :字符串
},
模板：“h2我是子组件-{{mymsg}}/H2”
}//在html中使用my-msg时，应该使用驼峰在js中命名myMsg
}
}
}
})
}
/脚本
/body
/html
最终结果如下：
vue父子组件的props传值
需求1
如果要将自定义属性里的值传递给模板，可以使用props属性：
注意上面的文字：
1.1.props的大写：对于html中的短横线命名，vue中要使用小驼峰命名法(大驼峰命名介绍：首字母也大写)；
2.2.template中必须有根目录：
需求2
实际项目中我们经常要将data里面的值传递给模板，操作如下：
思路：使用v-bind和data数据绑定，将值传递给组件模板中的插值。
另一个案例：
效果图：
交付过程总结：准备一个大组件(在vue实例中)和一个子组件son，通过v-bind在son子组件中绑定要交付的消息属性，消息属性的值是对应父组件中的数据值，然后在son子组件的component方法的第二个参数的对象中添加一个props属性(重点是这个props属性，它用来接收父组件的值)。值是一个数组，字符串形式的消息填充在其中。最后，您可以通过插值在子组件的模板中直接使用该消息。
同时，还需要知道子组件可以同步修改父组件和子组件的值，操作如下：
子组件修改父子组件值的操作过程：
在子组件中定义一个修改过的方法，并添加它。方法中的$emit()方法。它有两个参数，第一个是自定义事件名称，第二个是要修改的值。然后用v-on在父组件中添加这个自定义事件，并将值写入父组件方法。在这个方法中，使用(USD event)作为参数，在父组件方法中接收并操作想要修改的逻辑操作。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。