2021-07-19 组件通信之子传父 ref属性事件组件动态总线插槽 vue_cli创建vue项目

最新推荐文章于 2024-06-14 23:48:57 发布

m0_56274379

最新推荐文章于 2024-06-14 23:48:57 发布

阅读量117

点赞数

分类专栏： vue 文章标签： python vue

本文链接：https://blog.csdn.net/m0_56274379/article/details/118887755

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 组件通信之子传父（通过自定义事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <navbar @myevent="handleEvent"></navbar>


</div>
</body>
<script>
    // 定义全局组件
    Vue.component('navbar', {
        template: `
        <div>
            <h1>我是navbar</h1>
            <hr>
            <input type="text" v-model="name">
            <br>

            <button @click="handleClick">我是子组件的button</button>
        </div>
        `,
        data() {
            return {
                name: 'lqz'
            }
        },
        methods: {
            handleClick() {
                // 触发父组件中myevent这个自定义事件对应的函数执行
                this.$emit('myevent',this.name)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleEvent(name) {
                console.log('我执行了')
                console.log('从子组件传递的name:'+name)
            }
        }

    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <navbar @myevent="handleEvent" v-if="myshow"></navbar>


</div>
</body>
<script>
    // 定义全局组件
    Vue.component('navbar', {
        template: `
        <div>
            <h1>我是navbar</h1>
            <hr>

            <button @click="handleClick">点我隐藏子组件</button>
        </div>
        `,
        data() {
            return {
                // myshow: true
            }
        },
        methods: {
            handleClick() {
                // 触发父组件中myevent这个自定义事件对应的函数执行
                // this.myshow = !this.myshow
                this.$emit('myevent', false)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            myshow: true
        },
        methods: {
            handleEvent(show) {
                this.myshow = show
            }
        }

    })
</script>
</html>

2 ref属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    ref放在标签上，拿到的是原生节点
    <br>
    ref放在组件上，拿到的是组件对象(数据，方法，直接使用即可)
    <hr>
    <h1>ref用在标签上</h1>
    <input type="text" ref="myinput">
    <button @click="handleClick">点我触发事件</button>

    <hr>
    <h1>ref用在组件上</h1>
    <navbar ref="mynavbar"></navbar>


</div>
</body>
<script>
    // 定义全局组件
    Vue.component('navbar', {
        template: `
        <div>
            <h3>我是navbar</h3>
            <hr>
        </div>
        `,
        data() {
            return {
                myshow: true
            }
        },
        methods: {
            handleClick(a) {
                console.log('父组件调用我，传入了：'+a)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            myshow: true
        },
        methods: {
            handleClick() {
                //this.$refs 取到一个对象，放着你在标签上写得ref对应的value值

                //在父组件中直接取到了子组件的值（从子传到父）
                // console.log(this.$refs.mynavbar.myshow)
                //从父传子
                // this.$refs.mynavbar.myshow='sss'
                //调用子组件方法
                this.$refs.mynavbar.handleClick('lqz')

            }
        }

    })
</script>
</html>

3 事件总线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <child1></child1>

    <hr>
    <child2></child2>




</div>
</body>
<script>
    // 借助事件总线，实现跨组件通信
    //定义一个事件总线

    var bus=new Vue()

    Vue.component('child1', {
        template: `
        <div>
            <input type="text" v-model="msg">
            <button @click="send_msg">发送</button>
            <hr>
        </div>
        `,
        data() {
            return {
                msg: ''
            }
        },
        methods:{
            send_msg(){
                bus.$emit('suibian',this.msg)
            }
        }
    })

    Vue.component('child2', {
        template: `
        <div>
            <h5>我收到的内容是：{{recv_msg}}</h5>
        </div>
        `,
        data() {
            return {
                recv_msg:''
            }
        },
        mounted(){
            bus.$on('suibian',msg=> {
                this.recv_msg=msg
            })
        }
    })

    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {}

    })
</script>
</html>

4 动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">


    <button @click="who='Home'">首页</button>
    <button @click="who='User'">用户</button>
    <button @click="who='Order'">订单</button>

    <keep-alive>
        <component :is="who"></component>
    </keep-alive>

</div>
</body>
<script>

    Vue.component('Home', {
        template: `
        <div>
            首页
        </div>
        `,
        data() {
            return {}
        },
    })

    Vue.component('User', {
        template: `
        <div>
           用户组件
           <input type="text" v-model="name">
        </div>
        `,
        data() {
            return {
                name: ''
            }
        },
    })
    Vue.component('Order', {
        template: `
        <div>
            订单页面
        </div>
        `,
        data() {
            return {}
        },
    })

    var vm = new Vue({
        el: '#box',
        data: {
            who: 'Home'
        },

    })
</script>
</html>

5 插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <Home>阿斯顿发送到</Home>

    <Order>
        <button slot="b" @click="handleClick">我是个按钮</button>
    </Order>


</div>
</body>
<script>

    Vue.component('Home', {
        template: `
        <div>
            首页
            <div>
                <slot></slot>
            </div>

        </div>
        `,
        data() {
            return {}
        },
    })

    Vue.component('Order', {
        template: `
        <div>
            订单页面

            <slot name="a"></slot>
            <br>
            我是一行数据
            <br>
            <slot name="b"></slot>


        </div>
        `,
        data() {
            return {}
        },
    })

    var vm = new Vue({
        el: '#box',
        data: {
            who: 'Home'
        },
        methods:{
            handleClick(){
                console.log('我被点了')
            }
        }

    })
</script>
</html>

6 Vue-CLI 搭建vue项目

1 ECMAScript,javascript,nodejs的关系
2 安装nodejs（安装解释器）
3 java：sun---》oracle（甲骨文）----》有些包，收费
	-安卓使用java开发，涉及到版权
    -jdk：java开发工具包，做java开发，需要安装它  1.5 1.8大更新   java 15
    -jre：java运行环境，
    -jvm：java虚拟机，最少要占200m内存空间
    
    
4   安装node，一路下一步
	node：就是python命令
    npm：就是python的pip命令，npm下载模块慢，我们使用cmpm下载
    cnpm:阿里提供的
    npm install -g cnpm --registry=https://registry.npm.taobao.org
5 安装vue脚手架
cnpm install -g @vue/cli

6 多出vue命令
    vue create my-project： 创建出一个vue项目，等同于djagnoadmin createproject 名字
    # OR
    vue ui
7 开发
	-使用pycharm开发vue项目
    -装vue插件
8 运行起项目
	-terminal中：npm run serve
    -

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3BHtdqXm-1626654581896)(.\day86.assets\1626408322582.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iyh2bzP-1626654581901)(.\day86.assets\1626408646319.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KQ2eYHB-1626654581904)(.\day86.assets\1626409485838.png)]

6.1 vue项目目录介绍

myfirstvue  # 项目名
	-node_modules # 该项目所有的依赖，如果要把项目给别人，这个文件夹要删掉（很大）
    -public # 文件夹
        -favicon.ico #小图标
        -index.html  # 整个vue项目的index.html,单页面开发
        
    -src    # 核心
        -store # 如果装了vuex，就会有这个文件夹
        -router #如果装了vue router ，就会有这个文件夹
        -assets # 存放资源文件（js，css，img）
        -components # 小组件（在这写小组件）
        -views      #页面组件（在这写页面组件）
        main.js     # 整个项目的入口，核心配置
        App.vue     # 根组件
       
   -package.json # 项目的依赖，不能删
   -README.md    # 介绍

6.2 vue组件介绍

每个组件有三部分组成
	template：写html
    script：写js
    style：写css

<template>   
  <div class="about">
    <h1>写html</h1>
  </div>
</template>

<script>

js代码

</script>

<style>

css代码

</style>

6.3 vue-router的使用

1 以后，新建一个页面组件，写三部分
2 在router下的index.js内配置一下
const routes = [
    {  // / 路径，显示Home这个页面组件
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/order',
        name: 'Order',
        component: Order
    },
    {
        path: '/about',
        name: 'About',
        // component: () => import('../views/About.vue')
        component: About,
    }
]


3 在根vue中写
 <div id="app">
    <router-view/>
  </div>

4 以后要跳转到某个页面
 <router-link to="/路径">
     <button>点我跳转到order</button>
</router-link>

6.4 在项目中新建组件和使用

1 在components文件夹创建一个 xx.vue
2 在其他组件中使用
	-在scripts中
    import HelloWorld from '../components/HelloWorld.vue'
    export default {
      name: 'Home',
      components: {
        HelloWorld
      }
	}
    
3 在html中直接使用
<HelloWorld/>

6.5 js导入导出语法（了解）

1 有一些变量，函数，想在其他地方都用，可以写成一个包
新建一个文件夹，在文件夹中写index.js
在内部写函数，写变量，最后一定要导出
var name='lqz'
function add(a,b) {
    return a+b
}
export default {
    name,
    add
}
2 在想用的位置，导入使用即可
import xx from '../lqz'
console.log(xx.add(1,2))

6.6 使用axios

1 安装 cnpm install axios
2 导入使用
   import axios from 'axios'
   axios.get('api/index/').then(res => {})

6.6 前端代理

1 vue.config.js中module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true
      }
    }
  },
}

2 使用axios发送请求
      mounted() {
            axios.get('api/index/').then(res => {
                console.log(res.data)
                this.data_list = res.data.data.films
            })
        }

6.7 bootstrap和jq的使用

1 安装
cnpm install jquery
cnpm install bootstrap@3

2 配置vue.config.js中
const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

3 main.js中
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

6.8 elementui的使用

1 安装
cnpm install element-ui -S
2 main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

m0_56274379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-19 组件通信之子传父 ref属性事件组件动态总线插槽 vue_cli创建vue项目

1 组件通信之子传父（通过自定义事件）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="box"> <n
复制链接

扫一扫