Vue组件信息传递和Vue项目开发
Posted ye-hui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件信息传递和Vue项目开发相关的知识，希望对你有一定的参考价值。
一.全局组件
<body> <!-- 两个全局vue实例可以不用注册全局组件,就可以使用 --> <div id="app"> <global-tag></global-tag> </div> <div id="main"> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建全局组件 组件名 {} Vue.component(‘global-tag‘, { template: "<div @click=‘fn‘>全局组件点击了 {{ count }} 次</div>", data: function () { return { count: 0 } }, methods: { fn: function () { this.count++; } } }); // 两个挂载点 new Vue({ el: "#app", }); new Vue({ el: "#main", }); </script>
二.父组件传递信息给子组件
‘‘‘
采用属性绑定的方式
1,父级提供数据
2.绑定给子组件的自定义属性
3.子组件通过props的数组拿到自定义属性从而拿到数据
‘‘‘
<body> <div id="app"> <input type="text" v-model="sup_data"> <!-- 2 --> <global-tag :abcde="sup_msg" :sup_data="sup_data"></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 创建全局组件 Vue.component(‘global-tag‘, { // 3 props: [‘abcde‘, ‘sup_data‘], template: "<div @click=‘fn‘>{{ abcde }}</div>", methods: { fn: function () { alert(this.sup_data) } } }); // 将父组件的信息传递给子组件 // 采用属性绑定的方式: 1,父级提供数据 2.绑定给子组件的自定义属性 3.子组件通过props的数组拿到自定义属性从而拿到数据 new Vue({ el: "#app", data: { // 1 sup_msg: "父级的msg", sup_data: "" } }); </script>
三.子组件传递信息给父组件
‘‘‘
采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据
‘‘‘
<body> <div id="app"> <!-- abc为子组件的自定义事件,该事件的含义要在子组件内容声明规定 --> <!-- 2 --> <global-tag @abc="action"></global-tag> <global-tag @abc="action"></global-tag> {{ sup_info }} </div> </body> <script src="js/vue.js"></script> <script> // 创建全局组件 Vue.component(‘global-tag‘, { template: "<div><input v-model=‘info‘><p @click=‘sendMsg‘>子组件</p></div>", data: function () { return { info: "", msg: "子组件的信息" } }, methods: { // 1 sendMsg: function () { // alert(123) // 激活自定义事件 abc this.$emit(‘abc‘, this.msg, this.info) }, } }); // 将子组件的信息传递给父组件 // 采用发生事件的方式: // 1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据) // 2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据) // 3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据 new Vue({ el: "#app", data: { sup_info: "" }, methods: { // 3 action: function (msg, info) { alert(msg) this.sup_info = info } } }); </script>
四.Vue项目开发
‘‘‘
一个.vue文件就是一个组件
一个个小组件(存放在conponents文件夹下)组成一个可以代表页面的大组件(存放在views文件夹下)
每一个组件(.vue文件)都由 <template><template> <script></script> <style></style>
要打开一个已有的项目并运行,不需要项目的node_modules文件夹,今日项目目录执行npm install会自动安装项目的依赖包
‘‘‘
#### 1、环境搭建
- 安装node
```
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
```
- 安装cnpm
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
- 安装脚手架
```
cnpm install -g @vue/cli
```
- 清空缓存处理
```
npm cache clean --force
```
2
#### 2、项目的创建
- 创建项目
```js
vue creat 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
```
- 启动/停止项目
```js
npm run serve / ctrl+c
// 要提前进入项目根目录
```
- 打包项目
```js
npm run build
// 要在项目根目录下进行打包操作
```
3认识项目
(1)项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
(2)配置文件：vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
(3)main.js
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
(4)vue文件
<template> <!-- 模板区域 --> </template> <script> // 逻辑代码区域 // 该语法和script绑定出现 export default { } </script> <style scoped> /* 样式区域 */ /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */ </style>
4.项目功能
(1)vue-router
{ path: ‘/‘, name: ‘home‘, // 路由的重定向 redirect: ‘/home‘ } { // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签 path: ‘/one-view‘, name: ‘one‘, component: () => import(‘./views/OneView.vue‘) } { // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签 path: ‘/one-view/one-detail‘, component: () => import(‘./views/OneDetail.vue‘), // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签 children: [{ path: ‘show‘, component: () => import(‘./components/OneShow.vue‘) }] }
<!-- router-link渲染为a标签 --> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link :to="{name: ‘one‘}">One</router-link> | <!-- 为路由渲染的组件占位 --> <router-view />
a.router-link-exact-active { color: #42b983;}
// router的逻辑转跳 this.$router.push(‘/one-view‘)
// router采用history方式访问上一级 this.$router.go(-1)
(2)vuex
// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据 // state永远只能拥有一种状态值 state: { msg: "状态管理器" }, // 让state拥有多个状态值 mutations: { // 在一个一个组件中,均可以通过this.$store.commit(‘setMsg‘, new_msg)来修改state中的msg setMsg(state, new_msg) { state.msg = new_msg } }, // 让mutations拥有多个状态值 actions: { }
(2)vue-cookie
// 安装cookie的命令 // npm install vue-cookie --save // 为项目配置全局vue-cookie import VueCookie from ‘vue-cookie‘ // 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问 Vue.prototype.$cookie = VueCookie
// 持久化存储val的值到cookie中 this.$cookie.set(‘val‘, this.val) // 获取cookie中val字段值 this.$cookie.get(‘val‘)
(2)axios
// 安装 axios(ajax)的命令 // npm install axios--save // 为项目配置全局axios import Axios from ‘axios‘ Vue.prototype.$ajax = Axios
let _this = this this.$ajax({ method: ‘post‘, url: ‘http://127.0.0.1:5000/loginAction‘, params: { usr: this.usr, ps: this.ps } }).then(function(res) { // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向 // 要更新页面的title变量,title属于vue实例 // res为回调的对象,该对象的data属性就是后台返回的数据 _this.title = res.data }).catch(function(err) { window.console.log(err) })
# 用pycharm启动该文件模拟后台 from flask import Flask, request, render_template from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) @app.route(‘/‘) def index(): return "<h1>主页</h1>" @app.route(‘/loginAction‘, methods=[‘GET‘, ‘POST‘]) def test_action(): # print(request.args) # print(request.form) # print(request.values) usr = request.args[‘usr‘] ps = request.args[‘ps‘] if usr != ‘abc‘ or ps != ‘123‘: return ‘login failed‘ return ‘login success‘ if __name__ == ‘__main__‘: app.run()
以上是关于Vue组件信息传递和Vue项目开发的主要内容，如果未能解决你的问题，请参考以下文章