Python正课131 —— Vue 进阶4

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

https://www.cnblogs.com/xuexianqi/p/13174317.html

有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.

因为,产生了父组件调用子组件的情况.

例如,我们可以声明一个组件,作为父组件

在components/创建一个保存子组件的目录HomeSon

在HomeSon目录下,可以创建当前页面的子组件,例如,是Menu.vue

//  组件中代码必须写在同一个标签中
<template>
    <div >
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>
<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

二：传递数据

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

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

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

传递数据三个步骤：

1.在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据

<Menu :mynum="num" title="home里面写的数据"/>
# 上面表示在父组件调用Menu子组件的时候传递了2个数据：
  如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:，同时，属性名是自定义的，会在子组件中使用。
  如果要传递普通字符串数据，则不需要加上冒号:

2.在子组件中接受上面父组件传递的数据，需要在vm组件对象中，使用props属性类接受。

<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>
// 上面 props属性中表示接受了两个数据。

3.在子组件中的template中使用父组件传递过来的数据.

<template>
    <div >
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>

步骤流程:

使用父组件传递数据给子组件时, 注意一下几点:

1.传递数据是变量,则需要在属性左边添加冒号.

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

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

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

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

子组件传递数据给父组件

1.在子组件中，通过this.$emit()来调用父组件中定义的事件.

<template>
    <div>
      <p>Post的子组件</p>
      <h2>{{fnum}}</h2>
      <p>data={{data}}</p>
      <p>fnum={{fnum}}</p>
      <div><input type="text" v-model="fnum"></div>
    </div>
</template>
<script>
    export default {
        name: "PostSon",
        // 父组件传递数据给子组件: 1. 在父组件中调用子组件的组件名称标签上面声明属性和传递值，2. 在子组件中通过props进行接收
        props:["data","fnum"],  // 接受父组件中传递过来的数据
        // 子组件传递数据给父组件[事件的方式进行传递]：
        watch:{
          fnum(){
            console.log(this.fnum);
            // this.$emit("父元素的自定义事件","要传递的数据");  // 通过this.$emit()方法，子组件可以把数据传递给父组件
            this.$emit("postparentdata",this.fnum);
          }
        }
    }
</script>
<style scoped>
</style>

对应的事件属性。

<template>
    <div>
      <h1>num={{num}}</h1>
      <Son data="我是付组件里面的内容" :fnum="num" @postparentdata="getsondata"></Son>
    </div>
</template>

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

<script>
    import Son from "./PostSon"
    export default {
        name: "Post",
        data(){
          return {
            num: 100,
          }
        },
        components:{
          Son:Son,
        },
        methods:{
          getsondata(message){
            console.log("父组件"+message);
            this.num = message;
          }
        }
    }
</script>

三：在组件中使用axios获取数据

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

1.在项目根目录中使用 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: '<App/>'
});

2.在组建中使用axios获取数据

<script>
  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);
        })
      }
    }
  }
</script>

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

以上是 Python正课131 —— Vue 进阶4 的全部内容， 来源链接： utcz.com/z/379500.html

回到顶部