Vue组件传值

① 父给子传值

父组件中：

父组件标签中进行中绑定值，data中传值。
:name=“毛豆” 静态传值
<headermenu :title=“title” :logosrc=“logo” :num=“num” :name=“毛豆”></headermenu>
data() {
return {
title: “首页”,
logo: “https://www.baidu.com/img/bd_logo1.png?where=super”,
num: 100
}
}

子组件中：

利用props，将props写在子组件中，在子组件中绑定值。
第一种写法 ：直接传值
可以 传值 传方法 传对象
props:[‘title’,‘logsrc’]
第二种写法：约束传值，约束值的类型
props:{
title:String,
logsrc:String,
num:Number //传的num必须是数字值，字符串的话会报错
}

我的理解：在父组件里边的标签中写需要传的值，和子组件里边的props中写相同变量，就相当于在父组件和子组件中间架了一个有关这个变量的桥。

<template>
  <div id="app">
    <headermenu :title="title" :logosrc="logo" :num="num" :name="毛豆"></headermenu>
  </div>
</template>

<script>
import headermenu from "../component/header";
export default {
  name: "app",
  data() {
    return {
      title: "首页",
      logo: "https://www.baidu.com/img/bd_logo1.png?where=super",
      num: 100
    };
  },
  components: {
    headermenu
  }
};
</script>

//header文件
<template>
 <div id="headermenu">
     {{title}}
     <img src="logsrc">
     {{num}}
 </div>
</template>
<script>
export default {
    name:"headermenu",
    //直接写传值
    // props:['title','logsrc']
    props:{
        title:String,
        logsrc:String,
        num:Number,    //传的num必须是数字值，字符串的话会报错
        name:String
    }
}
</script>

② 子给父传值 子调用父的方法

这里有时间再看看，感觉老师讲的？？？？

this.parentele.方法/属性
parentele是父组件的this(将父组件的this,传到子组件中)

<template>
  <div id="app">
    <footermenu :parentele="this">{{childData}}</footermenu>
  </div>
</template>

<script>
import footermenu from "../component/footer";
export default {
  name: "app",
  data(){
  	return{
  		childData:"儿子还没传值"
  		}
	},
  components: {
    footermenu
  }
};
</script>

//footer文件
<template>
  <div id="footermenu">
    <button @click="sendParents">给父亲传值</button>
  </div>
</template>
<script>
export default {
  name: "footermenu",
  props: {
    parentele: Object
  },
  methods: {
    sendParents() {
      //给父亲传值
      console.log(this.parentele);  //this是当前组件，this.parent跳到了父组件中
      this.parentele.childData = "我给你了";
      console.log(this.$parent);
    }
  }
};
</script>

③ 父调子的方法

父组件获取子组件的数据和方法
1） 父组件获取子组件的方法和数据
可以通过ref获取dom元素，在子组件上定义ref属性
通过 this.$refs.name.属性/属性，就可以访问子组件里边的方法或属性
eg：this.$refs.childele.parenttome();
2）子组件主动获取父组件的属性和方法 This.$parent.数据
直接拿到父组件 this.$parents

<template>
  <div id="app">
    <footermenu ref="childele"></footermenu>
  </div>
</template>

<script>
import footermenu from "../component/footer";
export default {
  name: "app",
  mounted() {
    this.$refs.childele.parenttome();
  },
  components: {
    footermenu
  }
};
</script>

//footer文件
<script>
export default {
  name: "footermenu",
  methods: {
    parenttome() {
      console.log("父亲执行儿子");
    }
  }
};
</script>

④vue中非父组件之间的传值 事件车(广播传值)

① 在vue中非父子组件之间传值可以使用非父之间的通信
发送$emit 接收$on
② vuex 数据源管理，在做大型app时会用到？？？？
③ 两个组件之间相互传值，需要一个js文件在其中当桥梁，两个组件使用时都要引入这个js文件
如图：子父组件树状图，a和b不为自父关系，ab之间传值

//创建一个文件，用文件当两个组件对接的口
import Vue from 'vue'
let vue=new Vue();
export default vue;

<template>
    <div>
        <h3>我是Home组件</h3>
        <button @click="sendToNews()">给news传数据</button>
    </div>
</template>
<script>

import VueEmit from '../Model/VueEmit.js';  //引入js文件

export default {
    data(){
        return {
            msg:"我是Home"
        }
    },
     mounted(){
        VueEmit.$on("to-Home",(res)=>{
            console.log(res);
        });
    },
    methods:{
        sendToNews(){
        //第一个参数 名称，第二个参数 数据
            VueEmit.$emit("to-News",this.msg);
        }
    }
}
</script>

<template>
    <div>
        <h3>我是news组件</h3>
           <button @click="sendToHome()">给Home传数据</button>
    </div>
</template>
<script>

import VueEmit from '../Model/VueEmit.js';  //引入js文件

export default {
    data(){
        return {
            msg:"我是News组件"
        }
    },
    mounted(){
        VueEmit.$on("to-News",(res)=>{
            console.log(res);
        });
    },
    methods:{
        sendToHome(){
            VueEmit.$emit("to-Home",this.msg);
        }
    }
}
</script>