内容大纲组件嵌套

传递数据

axios知乎视频www.zhihu.com

for...in... 遍历的是index， for...of... 是正常的for循环

。/ 是同目录的意思

7.5 传递数据

父组件的数据传递给子组件

例如,我们希望把父组件的数据传递给子组件.

可以通过props属性来进行数据传递.

传递数据两个步骤，一个调用：在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据



home页面组件代码



// 1. 导入子组件
import Nav from "./common/nav"
export default {
name: "Home",
data(){
return {
num : 10,
}
},
// 注册
components:{
Nav,
}
}

# 上面表示在父组件调用Nav子组件的时候传递了2个数据：mynum和mytitle

如果要传递变量[变量可以是各种类型的数据]，属性名左边必须加上冒号:，

同时，属性名是自定义的，会在子组件中使用。

如果要传递普通字符串数据，则不需要加上冒号:在子组件中接受上面父组件传递的数据，需要在vm组件对象中，使用props属性类接受。

export default {
name:"Nav",
props:["mynum","title"],
data: function(){
return {
msg:"这是Menu组件里面的菜单",
}
}
}

// 上面 props属性中表示接受了两个数据。在子组件中的template中使用父组件传递过来的数据.



{{msg}}，{{title}}
 
  

    hello，{{mynum}}



使用父组件传递数据给子组件时, 注意一下几点:传递数据是变量,则需要在属性左边添加冒号.

传递数据是变量,这种数据称之为"动态数据传递"

传递数据不是变量,这种数据称之为"静态数据传递"

父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不是影响到父组件中的数据.

这种情况,在开发时,也被称为"单向数据流"

子组件传递数据给父组件在子组件中，通过this.$emit()来调用父组件中定义的事件.

this.$emit("父组件的自定义事件名", 要传递的参数1, 要传递的参数2,....)

子组件中


{{mynum}}
{{mytitle}}
nav里面的num1：{{num1}}



// 子组件传递给父组件使用，三个步骤
// 1.子组件中，数据修改的时候，通过this.$emit()方法进行数据的往外提交
// 2.父组件中，调用子组件的标签位置上使用自定义事件来接收，并在自定义事件发生时调用父组件的自定义方法
// 3.在自定义方法中，完成数据的接收
export default {
name: "nav",
props:["mynum", "mytitle"], // 等同于在data里面声明了mynum变量，并且mynum变量的值来自于上一个组件
data() {
return{
num1 : 10
}
},
watch:{
num1(){
// this.$emit("父组件的自定义事件名", 要传递的参数1, 要传递的参数2,....)
this.$emit("num1func", this.num1, "来自于nav的文本数据")
}
}
}

父组件中声明一个和子组件中this.$emit("自定义事件名称")对应的事件属性。

父组件中，声明一个自定义方法，在事件被调用时，执行的。

// 1. 导入子组件
import Nav from "./common/nav"
export default {
name: "Home",
data(){
return {
num1 : 0,
}
},
// 注册
components:{
Nav,
},
methods:{
changenum1(v1, v2){
console.log(v1, v2);
this.num1 = v1
}
}
}

8. 在组件中使用axios获取数据

默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。

在项目根目录中使用 npm安装包

npm install axios
接着在main.js文件中，导入axios并把axios对象 挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'
import App from './App' // 这里表示从别的目录下导入 单文件组件import axios from 'axios'; // 从node_modules目录中导入包Vue.config.productionTip = false
Vue.prototype.$axios = axios; // 把对象挂载vue中
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: ''
});
8.1 在组建中使用axios获取数据
export default{
。。。
methods:{
get_data:function(){
// 使用axios请求数据 this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
console.log(response);
}).catch(error=>{
console.log(error);
})
}
}
}

使用的时候，因为本质上来说，我们还是原来的axios，所以也会收到同源策略的影响。