Vue父子组件传值

首页（父组件）和头文件（子组件）形成父子关系；
将首页（父组件）数据传入到子组件（头文件）中；









=父组件向子组件传递方法================








页面之间组件传递=======================================

Props — 是数组,不是对象。



Vue官网：https://cn.vuejs.org


=父组件给子组件传值的合法性===






期望传值类型为String, 实际获取到Number;

Vue–父组件给子组件传递方法

一、父组件向子组件中传递方法：

1、方法【不带参数】和【带参数】：

父组件：ParentPage.vue

<template>
   <div class="parentPage">
        {{msga}}
         <v-helloworld :parentMethod="parentMethod"  
:hasParamsMethod="hasParamsMethod"></v-helloworld>
   </div>
</template>

<script>
import HelloWorld  from  '@/components/HelloWorld'
export default {
   data(){
       return{
           msga:'ParentPage.vue',
           title:'parentPage 父组件'
       }
   },components:{
       'v-helloworld':HelloWorld
   },methods:{
     parentMethod(){ //不带参数
        console.log('父组件中方法!');
     },
     hasParamsMethod(data){ //带参数
        console.log('父组件中方法,传入的参数'+data);
     }
   }
}
</script>
<style scoped>
.parentPage{
   background:grey;
}
</style>

子组件：HelloWorld.vue

<template>
  <div class="hello">
      <h1>{{ msgt }}</h1>
      <button @click='parentMethod()'>子组件中点击执行父组件中的
方法--不带参数  </button>
      <button @click="hasParamsMethod('12345678')">子组件中点击执行父
组件中的方法--带参数</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msgt: 'HelloWorld.vue'
    }
  },
  props:['parentMethod','hasParamsMethod']
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Vue–父组件给子组件传值

一、父组件->子组件传递参数:

原理：
父组件中注册子组件，父组件中有了子组件的属性、方法；
在子组件中通过props[‘xx’,’xxx’,’xxx’]属性,获取父组件中的属性，
访问父组件,父组件中传递给子组件的属性可以使用；

父组件：ParentPage.vue

<template>
   <div class="parentPage">
        {{msga}}
        <v-helloworld :msga=msga :title=title></v-helloworld>
   </div>
</template>
<script>
import HelloWorld  from  '@/components/HelloWorld'
export default {
   data(){
       return{
           msga:'ParentPage.vue',
           title:'parentPage 父组件'
       }
   },components:{
       
       'v-helloworld':HelloWorld
   }
}
</script>
<style scoped>
.parentPage{
   background:grey;
}
</style>

子组件：HelloWorld.vue

<template>
  <div class="hello">
      <h1>{{ msgt }}</h1>
      <div>我是父组件ParentPage-[-{{msga}}-]-[-{{title}}-]</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msgt: 'HelloWorld.vue'
    }
  },
  props:['msga','title']
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Vue–页面之间组件传递

一、页面ParentPage.vue

<template>
   <div class="parentPage">
        {{msga}}
        <v-helloworld  :title="title"  :hasParamsMethod="hasParamsMethod" 
 :parentMethod="parentMethod" :parentPage="this"></v-helloworld>
   </div>
</template>

<script>
import HelloWorld  from  '@/components/HelloWorld'
export default {
   data(){
       return{
           msga:'ParentPage.vue',
           title:'parentPage 父组件'
       }
   },components:{
       'v-helloworld':HelloWorld
   },methods:{ssss
     parentMethod(){
        console.log('父组件中方法!');
     },
     hasParamsMethod(data){
        console.log('父组件中方法,传入的参数'+data);
     }
   }
}
</script>
<style scoped>
.parentPage{
   background:grey;
}
</style>

二、页面：HelloWorld.vue

<template>
  <div class="hello">
      <h1>{{ msgt }}</h1>
      <button @click='parent()'>子组件中点击执行父组件中的方法--不带参数</button>
      <button @click="hasParams('12345678')">子组件中点击执行父组件中的方法--带参数                  </button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msgt: 'HelloWorld.vue'
    }
  },
  props:['title','parentMethod','hasParamsMethod','parentPage'],
  methods:{
    parent(){
        console.log("======"+this.parentPage.title);
        this.parentPage.parentMethod();
    },
    hasParams(data){
       this.parentPage.hasParamsMethod(data);
    }
  }
}
</script>
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Header.vue

props:[‘title’] 此种写法不对title做任何校验。

期望传值类型为String, 实际获取到Number;