精华内容
下载资源
问答
  • 【vue】vue组件方法调用
    千次阅读
    2019-08-01 16:44:14
    父组件调用子组件的方法

    在子组件中加上ref即可通过this.$refs.ref.method调用子组件的方法

    父组件部分:

    <template>
        <div id="parent">
            <v-child ref="vchild"></v-child>
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Parent",
    	    data () {
    	        return {
    	            msg: "from parent"
    	        }
    	    },
    	    components: {
    	        vChild: () => import("./vChild.vue")
    	    },
    	    methods: {
    	        this.$refs.vchild.childMethod(this.msg); 
    	    }
    	}
    </script>
    

    子组件部分:

    <template>
        <div id="child">
            {{msg}}
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Child",
    	    props: ["msg"],
    	    data () {
    	        return {
    	            msg: ""
    	        }
    	    },
    	    methods: {
    	        childMethod (msg) {
    	            this.msg = msg
    	        }
    	    }
    	}
    </script>
    

    子组件调用父组件方法(方式一)

    父组件部分:

    <template>
        <div id="parent">
            <v-child @parentHandle="childHandle"></v-child>
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Parent",
    	    data () {
    	        return {
    	            parentMsg: "from parent"
    	        }
    	    },
    	    components: {
    	        vChild: () => import("./vChild.vue")
    	    },
    	    methods: {
    	        childHandle(msg){
    	            console.log(msg)
    	        }
    	    }
    	}
    </script>
    

    父组件中的 childHandle 方法以 parentHandle 名称传递给子组件

    子组件部分:

    <template>
        <div id="child">
            <input type="text" v-model="msg" @change="inputChange" />
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Child",
    	    data () {
    	        return {
    	            msg: ""
    	        }
    	    },
    	    methods: {
    	        inputChange () {
    	            this.$emit("parentHandle", this.msg)
    	        }
    	    }
    	}
    </script>
    

    子组件调用父组件方法(方式二)

    父组件部分:

    <template>
        <div id="parent">
            <v-child></v-child>
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Parent",
    	    data () {
    	        return {
    	            parentMsg: "from parent"
    	        }
    	    },
    	    provide(){
    	        return {
    	            parentHandle: this.childHandle
    	        }
    	    },
    	    components: {
    	        vChild: () => import("./vChild.vue")
    	    },
    	    methods: {
    	        childHandle(msg){
    	            console.log(msg)
    	        }
    	    }
    	}
    </script>
    

    父组件通过 provide 将数据传递给子组件。

    子组件部分:

    <template>
        <div id="child">
            <input type="text" v-model="msg" @change="inputChange" />
        </div>
    </template>
    
    <script>
    	export default {
    	    name: "Child",
    	    inject: ["parentHandle"],
    	    data () {
    	        return {
    	            msg: ""
    	        }
    	    },
    	    methods: {
    	        inputChange () {
    	            this.parentHandle(this.msg)
    	        }
    	    }
    	}
    </script>
    

    子组件通过 inject 接收父组件的数据。

    该方法可跨越多层传递数据。


    子组件间方法调用

    子组件间方法调用可以通过父组件中转的方法。比如A、B为子组件,C为父组件,
    A要调用B的方法,方法是A调用C的方法,然后C在被A调用的方法中调用B的方法。

    更多相关内容
  • Vue组件是什么?Vue组件使用

    千次阅读 多人点赞 2020-04-13 17:45:09
    组件是什么? 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。...Vue组件使用 ...

    组件是什么?

    组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区,尾部,上传图片,等多个页面要用到一样的就可以做成组件,提高了代码的复用率。

    Vue组件的使用                                                                                                                         --非常详细--

    先说一下我们的目录

    一.创建我们的组件B.vue

    同理 ,新建一个hello_word.vue作为父

    那么你将看到这样的结果

    重点:

    hello_word.vue中引入B.vue模块   // import showB from './B.vue'  引入组件

    B文件的自定义模块名 showB

       注册组件

     components:{
              showB,        
            },

    <showB /> //使用组件

    注意:定义组件名要驼峰命名法  如:使用 PascalCase  使用 kebab-case

    开始进入正题 props

    父组件传值给子组件(父组件绑定数据如:value="该工作了",子组件通过props获取)
    子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。
    用法如下:

    B组件

    父组件

    那么你将看到页面显示

    在created打印下value的值

    结果,     

    子组件传值给父组件

    子组件中:

    <div @click="chuanzhi">回复父组件</div>

    chuanzhi() {
                this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去
            }


     

    父组件:

    在DOM中引入@msg='msg'

    <showB :value='text' @msg='msg'/> 

     msg(val){
                     console.log(val,'val')
                     }

    通过方法接收

    运行,点击回复父组件     

    打印结果:

     

     

     

     

     

    展开全文
  • vue.js中组件的创建和使用方法

    万次阅读 2017-05-26 09:33:14
    vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件。下边以实际例子说明组件的定义及使用方法。同时提供了使用语法糖的简单写法的例子

    vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件。

    一、创建组件构造器

      创建组件构造器的方法很简单,只需要以下语句即可:
      var MyCompontent=Vue.extend({...});
      然而这个时候还不能直接使用组件,需要把组件注册到应用中。

    二、注册组件

      Vue.js提供了两种注册组件的方式,分别为全局注册和局部注册,下边分别介绍:

      全局注册:需要确保在根实例初始化之前注册,这样才能使组件在任意实例中都可以使用。注册方式如下:
      Vue.component('my-component',MyComponent);//此句一定要放在new Vue({...});之前
      注册过程中也指定了组件的HTML标签。本例为<my-component>;

      局部注册:限定了组件只能在被注册的组件中使用,而无法在其他组件中使用。

    三、使用组件

      基于以上对组件的介绍,下边以一个具体的例子说明组件的使用方法。
      全局注册使用方法:
    <div id="app">
        <my-component></my-component>
    </div>
    <script src="vue.js"></script>
    <script>
        /*创建组件构造器*/
        var MyComponent = Vue.extend({
            template: '<p>This is a component</p>'
        });
        /*全局注册组件*/
        Vue.component('my-component', MyComponent);
        /*使用组件*/
        var vm = new Vue({
            el: '#app'
        })
    </script>


      局部注册使用方法:
    <div id="app">
        <my-component></my-component>
    </div>
    <script src="vue.js"></script>
    <script>
        var child = Vue.extend({
            template: '<p>This is a component</p>'
        });
        var vm = new Vue({
            el: '#app',
            components: {
                'my-component': child
            }
        });
    </script>


      以上代码最终在浏览器的中的渲染结果相同。只是全局注册的my-component标签可以在HTML文档中任何地方使用,而局部注册的my-compoment标签只能在id为app的容器下使用。

    四、语法糖表示法

      vue.js对于以上两种注册方法提供了简化方法,我们可以在注册组件的时候定义组件构造器。举例如下:
    <div id="app">
        <my-component></my-component>
    </div>
    <script src="vue.js"></script>
    <script>
        /**全局注册
         Vue.component('my-component', {
            template: '<p>This is a component</p>'
        });
         new Vue({
            el: '#app'
        });*/
            //局部注册
        new Vue({
            el: '#app',
            components: {
                'my-component': {
                    template: '<p>This is a component</p>}'
                }
            }
        })
    </script>


    展开全文
  • vue组件之间调用方法

    千次阅读 2020-12-31 10:23:15
    1.vue中子组件调用父组件方法 1>第一种方法是直接在子组件中通过this.$parent.event来调用父组件方法。 父组件 <template> <div> <child></child> </div> </template>...

    1.vue中子组件调用父组件的方法

    1>第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

    父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>
    

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>
    
    2>第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

    父组件

    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>
    

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>
    
    3> 第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

    父组件

    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>
    

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>
    

    2.父组件调用子组件的方法

    1>通过ref直接调用子组件的方法
    //父组件中
    
    <template>
        <div>
            <Button @click="handleClick">点击调用子组件方法</Button>
            <Child ref="child"/>
        </div>
    </template>    
    
    <script>
    import Child from './child';
    
    export default {
        methods: {
            handleClick() {
                  this.$refs.child.sing();
            },
        },
    }
    </script>
    
    
    //子组件中
    
    <template>
      <div>我是子组件</div>
    </template>
    <script>
    export default {
      methods: {
        sing() {
          console.log('我是子组件的方法');
        },
      },
    };
    </script>
    
    2>通过组件的$emit、$on方法;
    //父组件中
    
    <template>
        <div>
            <Button @click="handleClick">点击调用子组件方法</Button>
            <Child ref="child"/>
        </div>
    </template>    
    
    <script>
    import Child from './child';
    
    export default {
        methods: {
            handleClick() {
                   this.$refs.child.$emit("childmethod")    //子组件$on中的名字
            },
        },
    }
    </script>
    
    //子组件中
    
    <template>
        <div>我是子组件</div>
    </template>
    <script>
    export default {
        mounted() {
            this.$nextTick(function() {
                this.$on('childmethods', function() {
                    console.log('我是子组件方法');
                });
            });
         },
    };
    </script>
    
    展开全文
  • 下面记录一下使用的步骤(在Reat项目中使用Vue组件与此步骤类似)。 1. 安装vuera库 vuera库地址:https://www.npmjs.com/package/vuera 首先需要在Vue项目中安装vuera库,安装指令如下: // 使用yarn安装插件 yarn ...
  • ant-design-vue UI组件使用讲解

    万人学习 2019-06-10 11:26:25
    通过jeecg-boot项目实战,详细介绍 ant-design-vue UI组件使用,细致的讲解每个组件的用法,教你学会如何看ant-design-vue的官方文档。 对于初学入门者来讲,非常实用。
  • 在HTML文件中使用VUE组件

    千次阅读 2020-10-20 01:05:36
    本文的目的是学习如何在html中使用vue组件。主要内容是使用组件以有序列表的形式展示数组的数据。主要知识点有html,vue,v-for指令,js等等。
  • vue组件间传值的几种方法

    千次阅读 2022-02-10 19:08:41
    一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 <template class="father"> <child :自定义属性名="父组件的变量"></child> <template > 在子组件的props...
  • Vue中子组件调用父组件的三种方法

    千次阅读 2022-04-13 19:50:07
    Vue中子组件调用父组件的三种方法: 1.直接在子组件中通过“this.$parent.event”来调用父组件方法。 父组件 <template> <div> <child></child> </div> </template> &...
  • vue组件传参,调用方法的几种方式

    万次阅读 多人点赞 2019-06-18 20:27:26
    需要源码的可以直接拉到最下面,下载 此文章主要有以下几种方式通信 ...1. vue组件像子组件传值——props方法 ...这个算是vue生态,使用方法,可以看官网或者其它文章 源码如下: 源码下载
  • Vue 组件的定义和使用

    千次阅读 2019-01-21 16:36:54
    怎样在Vue中定义组件使用它?其实很简单! 在看懂我接下来的代码之前需要先把下面这幅图看懂 ! 图应该很好理解,App.vue是一个根组件。此根组件包含一个首页组件和一个新闻组件,首页组件和新闻组件同时又...
  • vue组件的定义方法

    千次阅读 2020-02-10 18:51:15
    拆分Vue实例的代码,能够让我们以不同的组件来划分不同的功能模块,直接调用对应的组件即可 方便ui组件的重用 与模块化的区别: 模块化是从代码逻辑的角度进行划分的,代码的没一层结构就是一个模块,业务逻辑层,...
  • Vue中父组件调用子组件方法

    千次阅读 2021-11-26 14:08:25
    场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载...实现在父组件选择时间后调用子组件方法重新渲染柱状图。 注: 博客:BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博
  • Vue 使用 函数调用组件方法

    千次阅读 2020-03-11 15:47:30
    之前写过一篇react 方法组件构造 Loading 的使用, 现在这篇就是 Vue 版本的 方法调用组件组件还是 vue 组件,这个和之前是一样的 Toast/Toast.vue <template> <div class="toast" v-if="show">...
  • html页面引入vue组件

    千次阅读 2021-06-29 08:16:42
    html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...component.vueHello {{who}}...
  • 1.父传子:通过自定义属性来...在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3.在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4.在子组件中使用的时候与data数据一样
  • 在Vue项目中使用React组件(antd组件库也可以),在React中使用Vue组件 下面我写个demo教大家如何在Vue组件库中使用React组件甚至antd组件 触类旁通,在React中使用Vue组件,自行解决,锻炼自己 使用vue-cli创建项目 ...
  • vue 兄弟组件互相调用方法

    万次阅读 2019-04-12 10:30:49
    在父组件里同时引入2个子组件(child1,child2),在child2里想调用child1组件里的某个方法。 实现方式: 在child2里用this.$emit('fun')传到父组件里 在父组件里,给child1组件加上ref="child1Container"属性 ...
  • vue 刷新组件方法记录

    千次阅读 2020-03-03 16:58:48
    vue 刷新组件方法
  • 外部js调用vue组件中的方法4.1 方式一(传参)4.1.1 vue组件调用方法时传this参数4.1.2 外部js方法中接受参数4.2 方式二4.2.1 方法赋值给window4.2.2 window调用5. 外部主js文件调用其它js中的方法5.1 引入a
  • vue3.0 子组件调用父组件中的方法

    千次阅读 2021-07-31 17:45:17
    vue2中,子组件调用父组件,直接使用this.$emit()即可。 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周期beforeCreate和created前执行,此时vue对象还...
  • JS如何调用VUE组件内部的方法

    万次阅读 2018-05-31 10:48:18
    需求描述:有一个js文件,需要调用vue内部methods中的方法。解决方案:可以将vue中的方法当作参数传出来。案例:vue中: methods: {  animation(){……}, aaa(){ jsmethod(homeThis.animation)  } }JS文件:...
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 某些情况下,组件也可以...
  • vue组件销毁重置详解

    万次阅读 2021-01-18 16:44:59
    vue组件销毁重置详解
  • Vue组件中触发子组件方法

    千次阅读 2021-02-06 21:23:51
    Vue组件中触发子组件方法使用场景: 在父组件点击子组件时,触发子组件的初始化方法。 方式一: ①子组件使用 ref 属性 <ParentComponent> <ChildComponents ref="ChildComponents">&...
  • vue组件封装

    千次阅读 2022-04-05 18:03:53
    1.1 首先创建一个xxx.vue...1.4 把组件名在需要设置的某xxx.vue文件中当标签使用 2. 局部注册---在所需设置的某xxx.vue文件中 2.1 首先创建一个xxx.vue文件 2.2在所需设置的某xxx.vue文件中引入 语法如下:.
  • Vue组件通信的六种方式

    千次阅读 2022-02-02 11:32:59
    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法...本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
  • 一:父组件调用子组件方法组件 <template> <div>  父页面 <son-com ref="sonRef"/> <button @click="handleClick">test</button> </div> </template> <...
  • Vue组件中data的使用方式

    千次阅读 2019-05-31 09:38:47
    全局组件中的data使用方式: js中写法: Vue.component("mycom1",{ template:'<h1>这是全局组件--{{msg}}</h1>', data:function () { return { msg:'这是全局组件中的data定义的数据' } } }); var...
  • Vue基础知识总结 4:vue组件化开发

    千次阅读 多人点赞 2021-07-21 23:37:50
    Vue组件应该有自己保存数据的地方。 组件自己的数据存放在哪里? 组件对象也有一个data属性(也有method等属性); 只是这个data属性必须是一个函数; 而且这个函数返回一个对象,对象内部保存着数据; 2、代码实例...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 439,775
精华内容 175,910
关键字:

vue组件使用方法