父组件给子组件传值
- 父组件调用子组件的时候，绑定动态属性
<headerchild :title="title" :run="run" :header="this"></headerchild>讯享网
2.在子组件里面通过props接收父组件传过来的数据
props:[‘title’]
或
props:{‘title’:String} /验证父组件传过来的数据/
3.直接在子组件里面使用
讯享网//父组件 <template> <div id="header"> <headerchild :title="title" :run="run" :home="this"></headerchild> </div> </template> <script> import HeaderChild from './HeaderChild' export default { data () { return { title:'我是父组件传过来的。' } }, methods: { run:function(){
alert("我是父组件里面的方法"); } }, components: { 'headerchild': HeaderChild } } </script> <style lang="sass" scoped> </style>
//子组件 <template> <div id="headerchild"> 我是子组件----{
{
title}} <button @click="run">执行父组件的方法</button> <button @click="getParent()">获取父组件的数据和方法</button> </div> </template> <script> export default { data () { return {} }, methods:{ getParent(){ alert(this.home) /*获取整个父组件*/ alert(this.home.title) /*获取父组件的数据*/ alert(this.home.run) /*获取父组件的方法*/ } }, props:['title','run','home'] /*通过props接收父组件传递过来的数据 */ } </script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/40634.html