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()

原文地址：https://www.cnblogs.com/ye-hui/p/10398026.html

时间： 2024-10-05 21:17:00

Vue组件信息传递和Vue项目开发的相关文章

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><

vue 组件数据传递:

vue1 组件数据传递: √1. 子组件就想获取父组件data 在调用子组件: <bbb :m="数据"></bbb> 子组件之内: props:['m','myMsg'] props:{ 'm':String, 'myMsg':Number } 2. 父级获取子级数据 *子组件把自己的数据,发送到父级 vm.$emit(事件名,数据); v-on: @ --------------------------------------------vm.$dispat

父子组件信息传递（子传父）

子组件传递信息至父组件:1.子组件发射自定义事件及信息,自定义事件名称b=function(){this.$emit("发射事件a",参数)}2.自定义模版中,设置对自定义事件的触发条件监听,如@click=“自定义事件b”3.父组件中设置监听,@“发射事件a及参数”="父组件事件c及参数",实现将子组件信息传至父组件从而实现子组件信息传达至父组件 <body> <div id = "app"> <cnp @btcl

vue组件值传递之父组件向子组件传递(props)

<template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li v-bind="message" v-for="item in message">{{item}} </li> </ul> <test v-bind:child_message="message"><

第四篇：Vue的项目开发

安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境安装其他插件 提供了socket,可以提供npm命令来启动socket 2)换源:将npm欢迎为cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3)安装vue脚手架 cnpm install -g @vue/cl

如何打造一套vue组件库

开篇组件库能帮我们节省开发精力,无需所有东西都从头开始去做,通过一个个小组件拼接起来,就得到了我们想要的最终页面.在日常开发中如果没有特定的一些业务需求,使用组件库进行开发无疑是更便捷高效,而且质量也相对更高的方案. 目前的开源组件库有很多,不管是react还是vue的体系里都有很多非常优秀的组件库,比如我经常使用的就有elementui和iview.当然也还有其他的一些组件库,他们的本质其实都是为了节省重复造基础组件这一轮子的过程.也有的公司可能会对自己公司的产品有特别的需求,不太愿意使用开源

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

vue组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <

Vue——组件的创建

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <