158-vue04-组件&组件间通信&插槽

最新推荐文章于 2024-05-15 09:33:20 发布
最新推荐文章于 2024-05-15 09:33:20 发布
阅读量113 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40808228/article/details/111341001
版权

昨日回顾

1 购物车案例
2 v-model之lazy，number，trim
	-lazy:input框的数据绑定等失去焦点以后再变化
   	-number：input框中333dsda，变成333
    -trim：input去前后空格
3 与后端交互
	-jq的ajax
	-fetche
    -axios：get，put，post，delete..(带头，带数据。。。)
    -跨域问题（如何处理）
4 与后端交互之fetche
5 与后端交互之axios
6 计算属性之首字母大写
	-函数当作变量来使用，有缓存，在页面上使用多次，只执行一次
7 通过计算属性重写过滤案例
	
8 组件定义
	-组件化开发：全局组件，局部组件
    -组件中有html，css，js：数据是独立的

## vue的开源项目，在本地运行起来（别人开源了一个djago项目，跑在本地）
1 vue项目：安装node（python解释器）---》一路下一步--》（node：python3，npm：pip）
2 使用pycharm打开vue项目
3 terminal中输入：npm install  （安装这个vue项目所有的依赖：pip3 install -r requ.txt）
4 命令行下执行：npm run serve / npm run start / npm run dev 等同于：python manage.py runserver

今日内容

1 定义局部组件

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

    Vue.component('child1', {
        template: `
            <div>
                <div style="background: red" @click="handleClick">我是头部</div>
                <div v-if="isShow">显示消失</div>
                <child></child>
            </div>
        `,
        methods: {
            handleClick() {
                console.log('我被点击了')
                this.isShow = !this.isShow
            }
        },
        data() {
            return {
                isShow: true
            }
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick() {
                console.log('根组件我被点击了')
            }
        },
        //局部组件
        components:{
            child:{  //child组件名
                template:`
                <div @click="handleClick">{{name}}</div>
                `, //组件模板
                methods:{
                    handleClick(){
                        console.log('我被点了')
                    }
                },
                data(){
                    return{
                        name:'lqz'
                    }
                },
            },
        }
    })
</script>
</html>

2 组件编写方式与Vue实例的区别

1 自定义组件需要有一个root element，一般包裹在一个div中,跟vue实例一样
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数

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

</body>
<script>
    Vue.component('navbar', {
        template: `
        <div>
            <button @click="handleClick">返回</button>
            我是NavBar{{aa}}
            <button style="background: red">主页</button>
            <br>
            <child></child>
        </div>
    `,
        methods: {
            handleClick() {
                console.log('nav nav')
            },
        },
        components: {
            child: {
                template: `<button>儿子</button>`,
            }
        },
        data() {
            return {
                aa: 'lqz'
            }
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick() {
                console.log('根组件我被点击了')
            }
        },
    })

</script>
</html>

3 组件通信之父传子通信

1 父子通信
2 在全局组件上自定义属性
	<navbar myname="lqz" age="18"></navbar>
3 在组件中获取
	props: ['myname','age']  #myname=lqz   age=18
        
4 区分开这两种赋值方式
     <navbar myname="lqz" age="18"></navbar>
     <navbar :myname="'ffff'" age="19"></navbar>
     <navbar :myname="name" age="19"></navbar>

3.1父传子通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="box">
    <!--myname是自定义属性-->
    <navbar myname="lqz" age="18"></navbar>
    <navbar :myname="'ffff'" age="19"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
        <div>
            <button @click="handleClick">返回</button>
            我是NavBar---{{age}}
            <button style="background: red">{{myname}}</button>
        </div>
    `,
        props: ['myname','age']
    })

    var vm = new Vue({
        el: '#box',
        data: {
            name: 'xxx',
        },
    })

</script>
</html>

3.2 属性验证

1 限制父传子的变量类型
	  props: {
            myname:String,
            isshow:Boolean,
            varies:'' //传递,但不验证类型
        }
2 父传子时注意以下的区别
    <navbar myname="lqz" :isshow="isshow"></navbar>
    <navbar myname="lqz" :isshow="false"></navbar>

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

<div id="box">
    <!--myname是自定义属性-->
<!--    <navbar myname="lqz" isshow="false"></navbar>-->
    <navbar myname="lqz" :isshow="isshow"></navbar>
    <navbar myname="lqz" :isshow="false"></navbar>

</div>


</body>
<script>
    Vue.component('navbar', {
        template: `
        <div>
            <button>返回</button>
            我是NavBar---{{isshow}}
            <button style="background: red">{{myname}}</button>
        </div>
    `,
        props: {
            myname:String,
            isshow:Boolean
        }
    })

    var vm = new Vue({
        el: '#box',
        data: {
            name: 'xxx',
            isshow:true,
        },
    })

</script>
</html>

4 组件通信之子传父通信

1 通过事件实现：
	点击一下子组件，就会触发父组件某个函数的执行

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

<div id="box">
<navbar @myevent="handleClick"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
        <div>
            <button @click="handleNav">点我，触发父组件的某个函数执行</button>
        </div>
    `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleNav(){
                console.log('我是nav的函数，我执行了')
                this.$emit('myevent',100,this.name,99)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
        },
        methods:{
            handleClick(ev,a,b){
                console.log('我是父组件的函数，我执行了')
                console.log(ev)
                console.log(a)
                console.log(b)
            }
        }


    })


</script>
</html>

4.2 小案例

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

<div id="box">
    <child @myevent="handle"></child>
    <hr>
    {{name}}
</div>

</body>
<script>
    Vue.component('child', {
        template: `
        <div>
        <input type="text" v-model="mytext">
        <button @click="handleClick">点我</button>
        </div>
    `,
        data() {
            return {
                mytext: ''
            }
        },
        methods: {
            handleClick() {
                this.$emit('myevent', this.mytext)
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            name: ''
        },
        methods: {
            handle(a) {
                this.name = a
            }
        }
    })
</script>
</html>

5 ref属性(也可实现组件间通信,子父，父子都可以使用)

ref放在标签上，拿到的是原生节点
ref放在组件上，拿到的是组件对象,
通过这种方式实现子传父（this.$refs.mychild.text）
通过这种方式实现父传子（调用子组件方法传参数）

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

<div id="box">
    <input type="text" ref="myref">

    <child ref="mychild"></child>
    <hr>
    <button @click="handleButton">点我</button>
</div>

</body>
<script>
    Vue.component('child', {
        template: `
        <div>
        <input type="text" v-model="mytext">
        <hr>
        我是子组件的input
        </div>
    `,
        data() {
            return {
                mytext: ''
            }
        },
        methods:{
            add(a){
                console.log('我是子组件的add方法')
                console.log(a)
                return '返回了'
            }
        }
    })

    var vm = new Vue({
        el: '#box',
        data: {
            name: 'asdf'
        },
        methods: {
            handle(a) {
                this.name = a
            },
            handleButton(){
                console.log(this.$refs.mychild.mytext)
                console.log(this.$refs.mychild.add(this.name))
            }
        }


    })


</script>
</html>

6 事件总线bus

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

<div id="box">

    <child1></child1>
    <hr>
    <child2></child2>

</div>

</body>
<script>

    //定义一个事件总线
    var bus=new Vue()


    //组件1
    Vue.component('child1', {
        template: `
        <div>
        <input type="text" v-model="text">
        <button @click="handleClick">点我传递数据到另一个组件</button>
        </div>
    `,
        data() {
            return {
                text: ''
            }
        },
        methods: {
            handleClick() {
                console.log(this.text)
                bus.$emit('suibian',this.text) //通过事件总线发送
            }
        }
    })
    //组件2
    Vue.component('child2', {
        template: `
        <div>
        收到的消息是：{{recv_text}}
        </div>
    `,
        data(){
            return {
                recv_text:''
            }
        },
        mounted(){//组件挂载（生命周期钩子函数中的一个），开始监听事件总线上的随便
            bus.$on('suibian',(item)=>{
                console.log('收到了',item)
                this.recv_text=item
            })

        },
    })

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

    })


</script>
</html>

7 动态组件

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

<div id="box">

    <ul>
        <li @click="who='child1'">首页</li>
        <li @click="who='child2'">商品</li>
        <li @click="who='child3'">订单</li>
    </ul>
    <!--<component :is="who"></component>-->
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `
                <div>我是首页 
                <input type="text">
                </div>
                `,
            },
            child2: {
                template: `
                <div>我是商品 </div>
                `,
            },
            child3: {
                template: `
                <div>我是订单 </div>
                `,
            }
        }
    })
</script>
</html>

8 slot插槽

8.1 基本使用

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

<div id="box">
    <child1>
        <ul>
            <li v-for="i in 4">{{i}}</li>
        </ul>
    </child1>
    <hr>
    <child2></child2>
    <hr>
    <child3></child3>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `

                <div>


                <slot></slot>
                <hr>
                我是首页

                <input type="text">

                </div>
                `,

            },
            child2: {
                template: `
                <div>我是商品 </div>
                `,

            },
            child3: {
                template: `
                <div>我是订单 </div>
                `,

            }
        }

    })


</script>
</html>

8.2 插槽案例（一个组件通过插槽控制另一个组件的显示隐藏）

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

<div id="box">
    <child1>
        <button @click="isShow=!isShow">点我隐藏child2</button>
    </child1>
    <hr>
    <child2 v-if="isShow"></child2>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        components: {
            child1: {
                template: `

                <div>
                <slot></slot>
                </div>
                `,

            },
            child2: {
                template: `
                <div>
                 <ul>
                 <li v-for="i in 4">{{i}}</li>
                </ul>
                 </div>
                `,

            },
     }

    })


</script>
</html>

8.3 具名插槽（指定标签放到组件的某个插槽中）

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

<div id="box">
    <child1>
        <button @click="isShow=!isShow" slot="button1">点我隐藏child2</button>

        <div slot="div1">我是div</div>
    </child1>
    <hr>
    <child2 v-if="isShow"></child2>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        components: {
            child1: {
                template: `

                <div>
                <slot name="button1"></slot>
                <hr>
                我是华丽的分割线
                <hr>
                <slot name="div1"></slot>
                </div>
                `,

            },
            child2: {
                template: `
                <div>
                 <ul>
                 <li v-for="i in 4">{{i}}</li>
                </ul>
                 </div>
                `,

            },
     }

    })


</script>
</html>
Pinkman2k
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React进阶-状态逻辑复用
m0_62118859的博客
05-02 784
目录 1.组件复用的说明 2. mixins 混入（已废弃） 3. 高阶组件 概述 基本使用 封装 withMouse 高阶组件 高阶组件的注意点 4.render-props 模式 基本使用 children 代替 render 属性 5. React Hooks 状态逻辑复用 6. 为什么要有 Hooks 7. 性能优化 8. 优化的方向 9.React.memo 浅对比的说明 10. useCallback 11. useMemo 12.class 组件优...
Ⅰ.2.6 如何测试Qt Widgets
se-tester的专栏
11-16 1235
这个部分我们看到Squish API使检查单个的widgets值和状态变得更简单，所以我们可以测试应用程序的业务规则。 正如我们在教程中看到的，我们可以使用Squish的记录功能来创建测试。然而，通常对于修改测试或者完全从零开始创建测试是有用的，特别是当我们测试包含多个widgets的业务规则时。 一般情况下，没有必要测试一个widget的标准行为。例如，如果一个未被选取的含有两个值的chec
react系列（9）混入mixins
@黄小泽的个人博客
11-27 3355
混入（混合）是指定义一个对象，让组件去继承该对象的方法和状态的过程，该对象也被称为混入（混合）对象。若组件和被继承的混合对象具体相同的生命钩子函数将要被执行，则混合对象的函数会优先执行，然后再到组件内相同函数执行，但仅限于生命钩子函数。 另外，组件内不允许有和混合对象相同命名的方法（非生命钩子函数），如例子中的handlAction，否则会报错。ReactClassInterface: You ...
前端页面如何自适应--4种方法
一步一个脚印，踏实努力，向着目标前进
10-29 8431
前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。
React Mixin：经典与未来的桥梁
最新发布
gitblog_00057的博客
05-15 360
React Mixin：经典与未来的桥梁 项目地址:https://gitcode.com/brigand/react-mixin 在React的生态系统中，面向类的编程风格已经成为主流，但你是否还在为如何将遗留的Mixins代码优雅地过渡到新环境中而烦恼？React-Mixin这个开源项目正是为此应运而生，它允许你在ES6类或其它脚本类型中无缝使用React的混入（Mixins）策略。 项目介...
18.（vue3.x+vite）组件间通信方式之v-model.rar
09-20
在Vue.js框架中，组件间通信是实现复杂应用的关键部分。Vue 3.x引入了一些新的特性和改进，其中就包括了在组件间使用`v-model`的更新方式。本示例"18.（vue3.x+vite）组件间通信方式之v-model.rar"将深入探讨如何在...
16.（vue3.x+vite）组件间通信方式之具名插槽.rar
09-20
在Vue组件开发中，组件间通信是不可避免的需求，而具名插槽（Named Slot）则是Vue中实现组件间通信的一种方式。下面将详细讲解Vue 3.x和Vite环境下的具名插槽使用方法。 首先，了解Vue 3.x中的组件通信。在Vue 2.x...
vue3.0 CLI - 2.5 - 了解组件的三维
10-18
- **依赖注入**：提供一种跨组件通信的机制，无需直接父子关系。 - **强制更新**：有时我们需要强制组件重新渲染，Vue 提供了相应的方法。 - **组件与路由**：结合 Vue Router 使用，组件与路由的关联可以实现...
ppt课件-第5章 Vue组件.zip
03-22
**组件通信**：Vue提供了多种组件间通信的方式。例如，通过props向下传递数据，使用自定义事件（$emit）向上触发，或者使用Vuex状态管理库进行复杂应用的状态管理。 **组件的生命周期**：Vue组件有多个生命周期钩子...
基于vue的选择月日组件--源码
07-07
这将帮助组织组件间的通信和数据共享。 由于项目已经不再维护，可能会存在一些问题，如不兼容最新的Vue版本，或者缺少文档和示例。不过，通过阅读源码，开发者仍能学习到如何创建类似组件，理解Vue组件的工作原理。...
react build 后打包发布总结
10-18
主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react中元素的显示和隐藏方式的使用（函数组件）
m0_72715879的博客
11-09 3071
react+hooks 做显示和隐藏
html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数，实现不同的样式...
weixin_33605464的博客
06-19 408
工作时遇到这样一个问题:根据某元素所包含的子元素个数，分别设置不同的样式，这个用js可以解决，不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。demo如下：效果图如下完整代码如下：css3*{box-sizing:border-box;}ul{width:100%;margin:0;padding:0;font-size: 0;}li{margin:0;padd...
avue-crud标签map地图选择器搜索与点击失效
u010771447的博客
08-01 5956
高德地图10044，USER_DAILY_QUERY_OVER_LIMIT，INVALID_USER_SCODE
avue-input-map高德地图简单搜索（vue项目）
weixin_45446474的博客
01-22 2082
配置： 在index.html配置如下，key 直接去高德地图申请即可 <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=自己的key值&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.PolyEditor'></script> <...
VUE父子组件生命周期执行顺序
qq_43474235的博客
03-24 324
一、父子组件异步传值的坑子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子组件没有任何内容渲染。二、解决父子组件异步传值的方法1. 给子组件添加渲染条件，使用v-if，当父组件数据接收完毕后在渲染子组件。2. 在子组件中添加watch监听，当父组件数据传输过来时，改变原有的默认数据，重新渲染页。
vue组件加载完成之后执行方法_vuejs加载完成后如何调用方法？
weixin_30387635的博客
12-23 2320
我正在尝试在组件安装后调用方法，但似乎在将数据馈送到组件之前就触发了该方法。我得到的错误：[Vue warn]: Error in mounted hook: "ReferenceError: url_refresh is not defined"我的组件看起来像这样：export default {props: {columns: Array,url_base: String,url_refre...
UE 小地图插件
qq_39447679的博客
07-19 673
UE 小地图插件
React Build
08-21 348
直接编译 1. 进入Folder 2. Npm Install 3. npm run build. 4. 更换src文件. 检查Js文件格式 npm run lint 可以查看报错， 然后npm run lint:fix可以修复一部分比较直接的问题 如果在windows编译，修改根目录下.eslintrc.yml中 linebreak<Windows>->&l...
vue3的组件通信插槽
10-13
Vue3中的组件通信可以使用插槽（slot）来实现。插槽是一种占位符，可以在父组件中定义，然后在子组件中使用。具体实现方式如下： 1. 在父组件中定义插槽： ``` <slot name="header"></slot> <slot></slot> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值