标签：vue parent get ops his method span exp strong
一、父组件与子组件之间值传递步骤如下：
例如：我有一个父组件Myhome.vue 和一个子组件Header.vue
1、父组件调用子组件的时候，动态绑定属性值
<v-myheader :title="title"></v-myheader>
2、在子组件使用 props 来接受父组件传过来数据（props:[‘title‘]），如果是多个就定义多个属性就可以
完整代码如下：
1、Myhome.vue(父组件)代码如下：
<template> <div id="homeapp"> <h1>这是一个home123</h1> <v-myheader :title="title"></v-myheader> </div> </template> <script> import MyHeader from ‘./Header.vue‘; export default { name:‘myhome‘, data () { return { title:‘父类数据‘ } } ,components :{ ‘v-myheader‘:MyHeader } } </script>
2、Header.vue（子组件）代码如下：
<template>
<div id="headerapp">
<h3>这是头部组件（子组件）</h3>
<h2>父类数据--{{title}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg:‘mgs‘
}
},methods:{
}
,props:[‘title‘]
}
</script>
2、除了传递属性以外还能传递方法和父组件的对象，如果是传递父组件的对象，那么在子组件里就能通过父组件对象获取属性和方法、数据
代码如下：
父类组件代码如下：
<template> <div id="homeapp"> <h1>这是一个home123</h1> <v-myheader :title="title" :show=‘show‘ :home="this"></v-myheader> </div> </template> <script> import MyHeader from ‘./Header.vue‘; export default { name:‘myhome‘, data () { return { title:‘父类数据‘ } } ,methods:{ show(a) { alert(‘我是父组件方法‘+a); } } ,components :{ ‘v-myheader‘:MyHeader } } </script>
其中:
:show=‘show‘->表示传递方法
:home="this"->表示传递父类实例对象
子组件代码如下：
<template>
<div id="headerapp">
<h3>这是头部组件（子组件）</h3>
<h2>父类数据--{{title}}</h2>
<button @click="show(123)">调用父类方法</button>
<button @click="getparentdata()">获取父组件数据和方法</button>
</div>
</template>
<script>
export default {
data() {
return {
msg:‘mgs‘
}
},methods:{
getparentdata (){
alert(this.home.title);
}
}
,props:[‘title‘,‘show‘,‘home‘]
}
</script>
标签：vue parent get ops his method span exp strong
原文地址：https://www.cnblogs.com/daiyekun-blog/p/10140003.html
