【Vue】组件、异步通信基础知识、Vuex

最新推荐文章于 2024-04-26 08:02:04 发布

繁星伴晚安

最新推荐文章于 2024-04-26 08:02:04 发布

阅读量178

点赞数

分类专栏： # Java实训文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48180029/article/details/118641981

版权

Java实训专栏收录该内容

16 篇文章 0 订阅

订阅专栏

父组件向子组件传递数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child v-bind:msg = "parentMsg"></child>
</div>

<script>
  //定义一个组件
  Vue.component("child",{
    props:['msg'],
    template:'<h1>{{msg}}</h1>'
  });
  var vm  = new Vue({
    el:"#app",
    data:{
      parentMsg:'父组件内容'
    }
  })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  请输入:<input v-model="parentMsg"></input>
  <child v-bind:msg = "parentMsg"></child>
</div>

<script>
  //定义一个组件
  Vue.component("child",{
    props:['msg'],
    template:'<h1>{{msg}}</h1>'
  });
  var vm  = new Vue({
    el:"#app",
    data:{
      parentMsg:''
    }
  })
</script>
</body>
</html>

在这里插入图片描述
第一步：子组件有一个数据counter，有一个按钮，当点击时实现数据加一

第二步：父组件有一个数据total，当子组件点击按钮时会发出一个信号，相应的父组件会执行incrementTotal这个函数，这个函数功能是让total加一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{total}}</p>
    <child v-on:increment="incrementTotal"></child>
    <child v-on:increment="incrementTotal"></child>
</div>

<script>
  //定义一个组件
  Vue.component("child",{
    template:'<button v-on:click="incrementHandle">{{counter}}</button>',
    data:function () {
      return {
        counter:0
      }
    },
    methods:{
      incrementHandle:function () {
        this.counter++;
        this.$emit('increment')     //注意:要加单引号
      }
    }
  });
  var vm  = new Vue({
    el:"#app",
    data:{
      total:0
    },
    methods:{
      incrementTotal:function () {
          this.total++;
      }
    }

  })
</script>
</body>
</html>

Axios

在这里插入图片描述

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit":true,
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": 4399,
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
  var vm = new Vue({
    el:'#app',
    mounted(){    //钩子函数

      //获取数据,参数url
      axios.get('../data.json').then(response=>(console.log(response.data)))     //然后
    }
  })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>

<div id="app">
    <h1>{{info.name}}</h1>
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data(){
      return{
        //请求的返回参数格式必须和json字符串格式保持一致
          info:{
              name:null,
              url:null,
              address:{
                  street:null,
                  city:null,
                  country:null
              }
          }
      }
    },
    mounted(){    //钩子函数

      //获取数据,参数url
      axios.get('../data.json').then(response=>(this.info=response.data))     //然后
    }
  })
</script>
</body>
</html>

在这里插入图片描述

Vuex

https://www.jianshu.com/p/2e5973fe1223
在这里插入图片描述

npm install vuex --save

在这里插入图片描述
初始化store下index.js中的内容

在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'

// 挂载Vuex
Vue.use(Vuex)

// 创建Vuex对象
const store = new Vuex.Store({
  state: {
    songId: ''
  }
})

export default store

将store挂载到当前项目的Vue实例当中去

在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'

// 挂载Vuex
Vue.use(Vuex)

// 创建Vuex对象
const store = new Vuex.Store({
  state: {
    songId: '',
    commentType: ''
  },
  mutations: {
    setSongIdAndCommentType (state, song) {
      this.state.songId = song.songId
      this.state.commentType = song.commentType
    }
  }
})

export default store

在组件中使用
在这里插入图片描述

在这里插入图片描述

this.$store.commit('setSongIdAndCommentType', {songId: songId, commentType: commentType})

繁星伴晚安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【Vue】组件、异步通信基础知识、Vuex

父组件向子组件传递数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app
复制链接

扫一扫