Vue 组件通信

最新推荐文章于 2022-07-15 00:15:00 发布
最新推荐文章于 2022-07-15 00:15:00 发布
阅读量182 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sklay/article/details/98499910
版权

一：组件

全局组件

组件使用的规则：创建组件，引用组件，使用组件

创建组件

调用Vue.extend()方法  创建组件构造器

调用Vue.component()方法  ，祖册组件

在Vue实例的范围内使用组件

<body>
    <div id="app">
        <test-comp></test-comp>
    </div>

    <script>
    //创建组件
    //返回一个构造函数
    var comp = Vue.extend({//选项对象，对组件进行描述
        template:`<div>hello</div>`
        
    });  
    //全局注册组件
    Vue.component('test-comp',comp)

    //使用组件
    new Vue({
        el:"#app"
        
    })
    
</script>
    
</body>


<body>
    <div id="app">
        <test-comp></test-comp>
    </div>
    <script type="text/x-template" id="temp">
        <div>hello</div>
    </script>
    //或者直接用html的原生模板 template
    <template id="temp">
        <div>hello</div>
    </template>
    <script>
     //模板的内容多的时候 定义在  外部
    var comp = Vue.extend({//选项对象，对组件进行描述
        template:"#temp"
    });  
    //全局注册组件
    Vue.component('test-comp',comp)//可以直接写成下面的格式

    //可以直接写成  自动调用 vue.extend()
     Vue.component('test-comp',{
        template:"#temp"
     })

    //使用组件
    new Vue({
        el:"#app"
        
    })
    
</script>
</body>

 

局部组件

<body>
    <div id="app">
        <test-comp></test-comp>
    </div>
<script>
        //局部组件 只能用在 这个实例的范围的模板中
    new Vue({
        id:"#app",
        components:{
            'test-comp':{
                template:"<div>我是局部组件，只能用在app中 </div>"
            }
        }
    })
</script>
</body>

总结：

1：每个组件的选项对象没有el

2:data不同，每个组件的选项对象的data是一个工厂函数，返回一个对象

多个组件的title不能共用同一个对象，每次调用 data函数，都会返回一个新的对象

<body>
    <div id="app">
        <test-comp></test-comp>
    </div>
    <template id="temp">
        <p>{{title}}</p>
    </template>
<script>
    Vue.component("test-comp",{
        data(){
            return {
                title:"你好"
            }
        },
        template:"#temp"
    })
    new Vue({
        el:"#app"
        
    })
</script>
</body>

 

二：props  父组件--->子组件 传参

<body>
    <div id="app">
        <test-comp :title='news.title' :list='news.list'></test-comp>
        //组件是公用的 ，通过props传递不同的参数
        <test-comp :title='yule.title' :list='yule.list'></test-comp>
    </div>
    <template id="temp">
        
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </template>
    <script type="text/javascript">
        // props 传递参数   父组件-->子组件  使用子组件标签时写在行间
        // :key = "数据"  key是子组件规定
        Vue.component('test-comp',{
            props:['title','list'],//接收父组件传过来的参数 props属性 都会放在当前组件的实例上
            template:'temp'
            
        })
        var news = {
            title:"新闻",
            list:["新闻1","新闻2"]
        }
        var list = {
            title:"娱乐",
            list:["娱乐1","娱乐2"]
        }

        new Vue({
            el:"#app",
            data:{
              news,
              yule  
            }
        })
    </script>
</body>

props验证

<body>
    <div id="app">
        <test-comp :title='news.title' :list='news.list'></test-comp>
        //组件是公用的 ，通过props传递不同的参数
        <test-comp :title='yule.title' :list='yule.list'></test-comp>
    </div>
    <template id="temp">
        
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </template>
    <script type="text/javascript">
        // props 传递参数   父组件-->子组件  使用子组件标签时写在行间
        // :key = "数据"  key是子组件规定
        Vue.component('test-comp',{
            //props:['title','list'],//props属性 都会放在当前组件的实例上

            //props验证

            props:{
                title:{
                    type:String,
                    default:'这是标题'
                },
                list:{
                    type:Array,
                    required:true,
                    //数组/对象不填时给的默认值不能直接写成下面的
                   // default:[]
                    //写成工厂函数，把对象返回回去
            
                    default(){
                        return []
                    }
                }
            }
            template:'temp'
            
        })
        var news = {
            title:"新闻",
            list:["新闻1","新闻2"]
        }
        var list = {
            title:"娱乐",
            list:["娱乐1","娱乐2"]
        }

        new Vue({
            el:"#app",
            data:{
              news,
              yule  
            }
        })
    </script>
</body>

 修改prop传过来的某个值 不能直接修改props，可以修改自己内部属性data的值  ，把父级传过来的数据，作为data 的初始值

<body>
    <div id="app">
        <test-comp :title='news.title' ></test-comp>
        //组件是公用的 ，通过props传递不同的参数
        <test-comp :title='yule.title' ></test-comp>
    </div>
    <template id="temp">
        
        <div>
            <h2>{{title}}</h2>
            <button @click="changeTitle">改变title</button>
        </div>
    </template>
    <script type="text/javascript">
        // props 传递参数   父组件-->子组件  使用子组件标签时写在行间
        // :key = "数据"  key是子组件规定
        Vue.component('test-comp',{
            //内部不能直接修改外部传过来的 props值，可以改变自己data中的值
            props:{
                title:{
                    type:String,
                    default:'这是标题'
                },
                list:{
                    type:Array,
                    required:true,
                    default(){
                        return []
                    }
                }
            },
            data(){//这变可以改变，把父级传过来的数据，作为自己组件状态得初始值
                myTitel = this.title
                
            }
            template:'temp',
            methods:{
                changeTitle:(){
                    this.myTitel  = '我是自己组件的初始值，我可以改变了'
                }
            }
            
        })
        var news = {
            title:"新闻",
            list:["新闻1","新闻2"]
        }
        var list = {
            title:"娱乐",
            list:["娱乐1","娱乐2"]
        }

        new Vue({
            el:"#app",
            data:{
              news,
              yule  
            }
        })
    </script>
</body>

$emit  子组件发布事件，通知父组件 $emit("事件名"，"参数")

<body>
    <div id="app">
        //@change父组件监听
        <test-comp :title='news.title' @change="changeHandle"></test-comp>
    </div>
    <template id="temp">
        
        <div>
            <h2>{{title}}</h2>
            <button @click="changeTitle">改变title</button>
        </div>
    </template>
    <script type="text/javascript">
        
        Vue.component('test-comp',{
            // $emit()发布事件 通知父组件
            props:{
                title:{
                    type:String,
                    default:'这是标题'
                }
            },
            
            template:'temp',
            methods:{
                changeTitle(){
                    //子组件发布事件，change 自定义事件名，第二个参数，是传给父组件监听触发额方法的参数
                    this.$emit("change","传递的参数")
                }
            }
            
        })
        var news = {
            title:"新闻",
            list:["新闻1","新闻2"]
        }
        var list = {
            title:"娱乐",
            list:["娱乐1","娱乐2"]
        }

        new Vue({
            el:"#app",
            data:{
              news,
              yule  
            },
            methods:{
                changeHandle(title){
                    this.news.title = title
                }
            }
        })
    </script>
</body>

 平行组件通信 event-bus   var eventBus = new Vue();

缺点 ：每个组件都能发布事件，会导致多个组件操作同一个属性

<body>
    <div id="app">
        <test1 @change="changeTest2"></test1>
        <test2 :title="title"></test2>
    </div>
   
    <script type="text/javascript">
        
        Vue.component('test1',{
            template:`
                <div>
                    <h2>我是标题1</h2>
                    <button @click="changeTitle">改变title</button>
                </div>
                `,
            methods:{
                changeTitle(){
                    this.$emit("change","我来自test1")
                }
            }
            
        })
        Vue.component('test2',{
            props:['title']
            template:`
                <div>
                    <h2>我是标题2</h2>
                    <p>{{title}}</p>
                </div>
                `
           
        })
       
     new Vue({
            el:"#app",
            data:{
                title:"给test2"
            },
            methods:{
                changeTest2(title){
                    this.title = title
                }
            }
        })
        
    </script>
</body>

 

<body>
    <div id="app">
        <test1></test1>
        <test2 :title="title"></test2>
    </div>
   
    <script type="text/javascript">
        
        Vue.component('test1',{
            template:`
                <div>
                    <h2>我是标题1</h2>
                    <button @click="changeTitle">改变title</button>
                </div>
                `,
            methods:{
                changeTitle(){
                    //this.$emit("change","我来自test1")
                    root.$emit("change","我来自test1")
                }
            }
            
        })
        Vue.component('test2',{
            props:['title']
            template:`
                <div>
                    <h2>我是标题2</h2>
                    <p>{{title}}</p>
                </div>
                `
           
        })
       
       let root = new Vue({
            el:"#app",
            data:{
                title:"给test2"
            }
        })
        //不需要再在父组件监听change了 
        root.$on('change',function(title){
            this.title = title
        })
    </script>
</body>

slot :订制html

<body>
    <div id="app">
        <modal>
              <p slot="content">我要出入新的内容</p>
               <input slot="footer" type="button" />
        </modal>
    </div>
    <template id="temp">
        <div class="modal">
            <h2>这是标题</2>
            //订制 对应  slot="content"
            <slot name="content">
                <div class="content">
                    <p>内容</p>
                </div>
            </slot>
            //对这边订制 slot="footer"
            <slot name="footer">
                <div class="footer">
                    <button>确定</button>
                </div>
            </slot>
        </div>
    <template>
    <script type="text/javascript">
        //对组件进行内容的订制  slot
        Vue.component('modal',{
            template:'#temp'
        })
        new Vue({
            el:'#app'
        })
    </script>
</body>

双向数据绑定

1：.sync 

<body>
    <div id="#app">
        <p>父组件：{{title}}</p>
        <hr/>
        //双向数据绑定
        <custom :title.sync='title'></custom>
        // 内部实现如下，此时要改变title需要发布事件
        <custom @update:title='title'></custom>
    </div>
    
    <script>
        Vue.component('custom',{
            props:['title']
            template:`
                <div>
                    <p>{{title}}</p>
                    <button @click='changeTitle'>改变title</button>
                </div>
            `,
            methods:{
                changeTitle(){
                    //任然要发布一个是事件   此时是  update事件
                    this.$emit('update:title','子组件修改了值')

                }
            }

        })
        new Vue({
            el:'#app',
            data:{

                title:'这是父组件的标题'
            }
        })
        
    </script>
</body>

2: v-model 

<body>
    <div id="#app">
        <input type='text' v-model='title' />
        {{title}}
        //本质上实现  v-model语法糖
        //<input type='text' :vlue='title'  @input='title=$event.target.value'/>

        //v-model 在组件上的应用
        <custom v-model='title'></custom>
        //  本质上的实现
        <custom :vlue='title'  @input='title=$event.target.value'>
        </custom>
    </div>
    
    <script>
        Vue.component('custom',{
            props:['value'] //此时传递的参数是value 因为父组件绑定 的是value
            template:`
                <div>
                    <p>{{value}}</p>//使用是也是 value
                    <button @click='changeTitle'>改变title</button>
                </div>
            `,
            methods:{
                changeTitle(){
                    //任然要发布一个是事件   此时是  input 事件
                    this.$emit('input','子组件修改了值')

                }
            }

        })
        new Vue({
            el:'#app',
            data:{

                title:'这是父组件的标题'
            }
        })
        
    </script>
</body>

 

sklay
关注
专栏目录
vue 点击事件传递多个参数_连肝3个晚上，我总结了一份Vue实操绝密干货！（共34条）...
weixin_34161139的博客
12-27 2358
这是我学习整理的关于 Vue.js 系列文章的第一篇，另外还有两篇分别是关于优化和原理的。希望读完这3篇文章，你能对 Vue 有个更深入的认识。7种组件通信方式随你选组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。props/@on+$emit用于实现父子组件间通信。通过 props 可以把父组件的消息传递给子组件：// parent.vue <child ...
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
Vue.js组件
下一站，幸福
10-23 1528
组件简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树： 那么什么是组件呢？ 组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。组件的创建和注册基本步骤 Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。 下面的代码演示
Vue_ 组件的重要选项
大脸猫~
06-27 900
一.初识Vue： &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;我们常规编写的页面时HTML、css、JavaScript，但是在Vue中，我们编写静态页面在.vue中，webpack打包工具帮助我们解析Vue成html,css,javascript. 学习Vue主要是学习template、script、style标签,他们的对应关系： 一个简单的例子： var hello...
如何解决：warning Prop ‘fontFamily‘ requires default value to be set vue/require- 以及 vue3中props的默认写法
青颜的天空的博客
07-15 3463
Vue3 中的项目使用 eslint 进行代码校验 报如下警告 warning Prop 'params' requires default value to be set vue/require-default-prop 意思为：Prop ‘params’ 需要设置默认值
解决vue prop传值default属性如何使用,为何不生效的问题
01-18
如果在template中，显示的调用了 prop 属性，那么 default 属性就不会生效 如果在template中，不调用 prop 属性，default 就会生效 default 值有效与否，和 prop 的验证通不通过，没有关系 //声明 Vue.component(blog-post, { props: { postTitle: { type: Number, default: 10000 } }, template: <h3>{{ postTitle }}</h3> }); //在template中，显示调用prop 属性，default不生效
kang_vue_components:vue组件通信介绍原始码-源码通
03-24
让我们深入研究Vue组件通信的几种常见方式。 1. **props向下传递**： - 在Vue中，父组件可以使用`props`将数据传递给子组件。在`props`中定义接收的数据属性，然后在子组件的模板中使用它们。 - 例如：`...
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
Vue组件通信的四种方式汇总
08-28
本文将详细介绍Vue组件通信的四种常见方法：父子组件通信、非父子组件的EventBus通信、使用localStorage或sessionStorage以及Vuex状态管理。 **1. 父子组件通信** 父子组件通信是最基础的通信方式，主要包括数据从...
报错问题及解决方案
u013486889的博客
12-10 2472
Parsing error: x-invalid-end-tag eslint.js rules: { "no-sequences": [0], "max-lines": ["warn", { "max": 1000, "skipBlankLines": true, "skipComments": true }], "no-debugger": process.env.NOD...
vue prop传值default属性如何使用，为何不生效？
龙旗飘扬的舰队
01-18 1万+
如果在template中，显示的调用了 prop 属性，那么 default 属性就不会生效 如果在template中，不调用 prop 属性，default 就会生效 default 值有效与否，和 prop 的验证通不通过，没有关系 //声明 Vue.component("blog-post", { props: { postTitle: { type: Numbe...
[Vue warn]: The data property "orderId" is already declared as a prop. Use prop default value instea
热门推荐
学渣蓝鲸的博客
08-28 4万+
在使用Vue开发中，使用组件时报了这么一个错误： [Vue warn]: The data property "orderId" is already declared as a prop. Use prop default value instead. 翻译过来就是： 数据属性“orderId”已经声明为一个PROP。使用PROP默认值代替。 经过查找是在组件传值时，传过来了一个orde...
vue问题记录（五）：Invalid default value for prop "options": Props with type Object/Array must use a factory
Fiona_lms的博客
11-06 1万+
Invalid default value for prop “options”: Props with type Object/Array must use a factory function to return the default value. .（props default 数组／对象的默认值应当由一个工厂函数返回） 今天在写代码的时候，控制台报了这个错误，然后在网上查阅了资料，就是...
Vue .sync修饰符与$emit(update:xxx)
HDdgut的博客
09-09 1755
.sync修饰符的作用 .sync修饰符之前的写法 使用.sync修饰符的写法 .sync修饰符与$emit(update:xxx)，驼峰法和-写法的区别
vue表单进行验证的时候，prop属性验证踩坑记录
weixin_44142032的博客
09-23 5275
当表单进行验证时候，prop指定需要校验的属性必须是表单model属性中对应的对象的属性名称。 否则会出现一直验证的错误。 :model=“dataForm” dataForm对象中要有校验的属性才可以 <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px"
Vue基础（六）--组件及组件间的通讯
程序员大佬超的博客
10-29 237
1.什么是组件 扩展HTML元素，封装可重用的代码。 组件是自定义元素（对象）。 2.定义组件的方式 方式1：先创建组件构造器，然后由组件构造器创建组件 方式2：直接创建组件 示例： <!doctype html> <html> <head> <meta charset="utf-8"> <...
vue props默认值大坑
xuelang532777032的博客
12-11 1万+
正常的场景是这样的    &lt;div&gt;       &lt;el-table :height="tableH"&gt;         &lt;slot&gt;&lt;/slot&gt;       &lt;/el-table&gt; &lt;/div&gt; 这是 element-ui的table组件   那边 props绑定一个heght  变量  tableH 意思是可
【气动学】基于matlab三种导引律下的弹道仿真【含Matlab源码 8026期】.mp4
最新发布
09-26
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Vue组件通信详解：从props到事件的传递
"Vue.js组件间通信解析，包括父子组件通信和兄弟组件通信的方法。" 在Vue.js中，组件间的通信是实现复杂应用的关键。Vue提供了多种方式来处理组件之间的数据交互，主要涵盖以下几种： 1. 父组件传子组件（属性传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值