精华内容
下载资源
问答
  • vue自定义组件

    2018-05-04 22:56:18
    vue自定义组件

    vue中如何实现自定义组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-text</title>
        <script src="../assets/jquery-3.1.1.min.js"></script>
        <script src="../assets/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <wpwp :aaaaa="name"></wpwp>
        </div>
        <script>
            Vue.component('wpwp',{
                template: '<div @click="al">这是一个子组件----{{this.aaaaa}}</div>',
                data:function () {
                    return {
                        age: 18
                    }
                },
                props:["aaaaa"],
                methods:{
                    al:function(){
                        console.log(this.aaaaa);
                    }
                }
            });
    
            new Vue({
                el: '#app',
                data:{
                    name: 'weeeepwp'
                }
            })
        </script>
    </body>
    </html>

    自定义组件时,如果想要实现子组件可以访问vue实例中的属性,那么需要在子组件中设置props属性,props是一个数组,在使用组件的地方,使用props数组中的值,名字要和props中的一致,值的名字要和vue实例中data中的属性一致,这样就实现了父子的绑定,当在子组件中使用的时候,只需要使用this.props中的数组名就可以得到vue实例中的data的值


    展开全文
  • Vue 自定义组件

    千次阅读 2019-01-13 22:02:09
    @[TOC]Vue 自定义组件 什么是组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用...

    @[TOC]Vue 自定义组件

    什么是组件

    组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可。

    组件化和模块化的区别

    • 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的只能单一;
    • 组件化:是从 UI 界面的角度进行划分的;前端的组件化,方便 UI 组件的重用。

    定义全局组件的三种方式

    1. 使用 Vue.extend 创建全局的 Vue 组件:
      1.1 使用 Vue.extend 创建全局组件;
      1.2 使用 Vue.component (‘组件的名称’,创建出来的组件模板对象);
      1.3 如果要使用组件,直接把组件的名称以 HTML 标签的形式,引用到页面中;

    注意:如果使用 Vue.component 定义全局组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写字母,同时两个单词之间使用 短横线(-)连接

    Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个标签形式来引入它的;
    第二个参数:Vue.extend 创建的组件,其中 template 就是组件将来要展示的 HTML 内容;

    <div id='app'>
    <!--3.如果要使用组件,直接把组件的名称以 HTML 标签的形式,引用到页面中-->
    	<mycom1></mycom1>
    </div>
    
    //1.使用 Vue.extend 创建全局组件
    var com1 = Vue.extend({
    	template:'<h3>Vue.extend</h3>'
    })
    //2.使用 Vue.component('组件的名称',创建出来的组件模板对象)
    Vue.component('mycom1',com1)
    //如果不使用驼峰,则直接拿名称来使用即可
    var vm = new Vue({
    	el:'#app',
    	data:{},
    	methods:{}
    })
    

    通过 template 属性,指定组件要展示的 HTML 结构

    1. 直接使用 Vue.component 方法:
    <div id='app'>
    <!--如果要使用组件,直接把组件的名称以 HTML 标签的形式,引用到页面中-->
    	<mycom2></mycom2>
    </div>
    
    //使用 Vue.component('组件的名称',组件模板对象),第二个参数直接传入 对象字面量
    Vue.component('mycom2',{
    	template:'<h3>Vue.component</h3>'
    })
    
    var vm = new Vue({
    	el:'#app',
    	data:{},
    	methods:{}
    })
    
    1. 将模板字符串,定义到 script 标签中:
      在被控制的 #app 外面,使用 template 元素,定义组件的 HTML 模板结构。
      注:template 元素是 Vue 实例提供的标签
    <div id='app'>
    	<mycom3></mycom3>
    </div>
    <template id="tmpl">
    	<div><!--必须有一个根元素-->
    		<h3>template Element</h3>
    	</div>
    </template>
    

    同时,需要使用 Vue.component 来定义组件:

    //使用 Vue.component('组件的名称',组件模板对象)
    Vue.component('mycom3',{
    	template:'#tmpl'
    })
    var vm = new Vue({
    	el:'#app',
    	data:{},
    	methods:{}
    })
    

    注意:组件中的 DOM 结构(组件的template 属性指向的模板内容),有且只能有唯一的根元素(Root Element)来进行包裹!(一般都是用 div 元素进行包裹)

    定义私有组件

    可以在 Vue 实例内部 定义私有组件 -> components 属性,表示只可以在该 Vue 实例中可用。

    代码示例:

    var vm = new Vue({
    	el:'#app',
    	data:{},
    	methods:{},
    	components:{
    		login:{
    			template:'<h1>private</h1>'
    		}
    	}
    })
    

    组件中的 data 和 methods

    组件可以有自己的 data 数据和 methods 方法,但组件中的 data 跟 Vue 实例中的不一样。实例中的 data 可以为一个对象,但组件中的 data 必须是一个 function函数,且要 return返回一个对象。

    代码示例:计数

    <div id="app">
    	<counter></counter><counter></counter>
    	<counter></counter>
    </div>
    <template id="tmpl">
    	<div>
    		<input type="button" value="+1" @click="increment">
    		<h3>{{count}}</h3>
    	</div>
    </template>
    
    //定义全局组件
    Vue.component('counter',{
    	template:'#tmpl',
    	data:function(){
    		return {count:0}
    		//data 数据可以在 template 模板上引用
    	},
    	methods:{
    	//组件中的方法
    		increment(){
    			this.count ++
    		}
    	}
    })
    var vm = new Vue({
    	el:'#app',
    	data:{},
    	methods:{},
    })
    

    当你在定义多个一样的组件时,你就会发现它们都是一起调用方法的,故组件中的 data 必须是一个函数。

    组件切换

    Vue 提供了 component 元素,来展示对应名称的组件。可看作是一个占位符。该元素下的 :is(这个属性有 v-bind 属性绑定) 属性,可以用来指定要展示的组件的名称
    代码示例:

    <div id="app">
    	<a href="" @click.prevent="comName='login'">login</a>
    	<a href="" @click.prevent="comName='register'">register</a>
    	<component :is="comName"></component>
    	<!--因为这个属性有属性绑定,所以它的属性值一定是一个变量,
    	故我们可以在 Vue 实例的 data 定义一个变量,从而实现组件的切换-->
    </div>
    
    
    <script>
        var login = {
            template:'<h3>login</h3>'
        }
        var register = {
            template:'<h3>register</h3>'
        }
        new Vue({
            el:'#app',
            data:{
            	comName:'login',
            	//当前 component 中的 :is 绑定的组件名称
            },
            methods:{},
        })
    </script>
    

    组件之间传值

    组件之间的传值方式有:父组件向子组件传值,子组件向父组件传值,还有任意组件之间传值。

    父子组件通信

    父子组件通信,通过属性绑定(v-bind: 自定义属性)和 component 组件下的 props 属性(props 是一个数组对象)进行传值。

    1. 在父组件引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用;
    2. 把父组件传递过来的 parentmsg (自定义属性)属性,在 component 下的 props 数组中定义一下,这样才能使用这个数据;

    代码示例:

    <div id="app">
    	<!--自定义属性,属性值为父组件中的数据-->
       <com1 :parentmsg="msg"></com1>
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            	msg:'father component data'
            },
            methods:{},
            //子组件默认访问不到父组件的 data 中的数据和 methods 中的方法
            components:{
            	com1:{
            		template:'<h1>child component {{parentmsg}}</h1>',
            		data(){
            			return {}
            		},
            		//在子组件中使用插值表达式输出父组件的数据
            		props:['parentmsg']
            	}
            }
        })
    </script>
    

    注意:组件中的所有 props 中的数据都是通过父组件传递给子组件的。

    组件中的 data 和 props 的区别

    1. 子组件中的 props 中的数据是通过父组件传递过来的。子组件中的 data 数据并不是通过父组件传递过来的,是子组件私有的,比如:子组件通过 Ajax,请求回来的数据,都可以放到data 身上;
    2. props中的数据是只读的,无法重新赋值;data中的数据都是可读可写的;

    子父组件通信

    子父组件通信,通过事件绑定机制(自定义事件)来进行传值。

    1. 先父组件传递一个方法到子组件,用自定义事件;
    2. 然后在子组件的内部定义一个方法,使用自定义事件的方法 $emit 调用自定义事件,父组件的方法;
    3. 可以用方法传参的方式,把子组件的 data 数据传递给父组件

    代码示例:

    <div id="app">
    	<!--自定义事件-->
       <com2 @func="show"></com2>
    </div>
    <template id="tmpl">
    	<div><!--必须有一个根元素-->
    		<h1>child component</h1>
    		<input type="button" value="use father's methods" @click="childclick">
    	</div>
    </template>
    
    <script>
    	//定义一个字面量类型的 组件模板对象
    	var com2 = {
            template:'#tmpl',
            //通过指定一个 id,表示说要去加载这个 id 的 template 元素中的内容,当做组件的 HTML 结构
            data(){
            	return {
            		sonmsg:{name:'son',age:6}
            	}
            },
            methods:{
            	childclick(){
            	// emit 英文原意:触发
            		this.$emit('func',this.sonmsg)
            	}
            }
        }
        var vm = new Vue({
            el:'#app',
            data:{
            	datamsgFromson:null
            },
            methods:{
            	show(data){
            		//console.log("use father's methods" + data)
            		this.datamsgFromson = data
            	}
            },
            components:{
            	com2
            }
        })
    </script>
    

    任意组件通信

    代码示例:一个人说一个人听

    <div id="app">
       <you></you>
       <me></me>
    </div>
    
    <script>
        //you say, i listening
        var ent = new Vue();
    
        Vue.component('you',{
            template:`<div>you say :  <input @keyup="sayFn()" size="30" type="text" v-model="iSaid"></div>`,
            data:function(){
                return {
                    iSaid:''
                }
            },
            methods:{
                sayFn:function(){
                    ent.$emit("sayThing",this.iSaid)
                }
            }
        });
        Vue.component('me',{
            template:`<div>i listen :{{youSaid}}</div>`,
            data:function(){
                return {
                    youSaid:''
                }
            },
            mounted:function(){		//生命周期钩子函数
                var i = this;
                ent.$on("sayThing",function(data){
                    i.youSaid = data;
                })
            }
        });
    
    
        new Vue({
            el:'#app',
        })
    </script>
    
    展开全文
  • 在用vue构建项目的过程中,我们有时会用到别人开发的组件vue-router;使用他人组件的正常步骤如下:1、命令行进行安装,执行install;2、在vue项目中的入口文件main.js中,进行导入;3、然后用Vue.use(plugin)引入...

    在用vue构建项目的过程中,我们有时会用到别人开发的组件如vue-router;使用他人组件的正常步骤如下:

    1、命令行进行安装,执行install;

    2、在vue项目中的入口文件main.js中,进行导入;

    3、然后用Vue.use(plugin)引入该组件。

    我们也可以创造属于自己的组件, 具体步骤如下:

    1、在components文件中创建test文件;

    2、在test文件中,创建index.js和Test.vue;

    3、Test.vue中的代码如下:

    实现自定义组件

    export default{

    data () {

    return {

    msg: 'hello vue'

    }

    },

    components: {}

    }

    4、test文件夹下的index.js中的代码如下:

    import MyTest from './Test.vue'

    const Test = {

    install (Vue) {

    Vue.component('Test', MyTest)

    }

    }

    export default Test

    5、入口文件main.js进行相关的配置:

    import Test from './components/test'

    Vue.use(Test)

    6、如此这般,就可以在其它组件中正常使用,如下:

    自定义组件Test的内容("实现自定义组件")将会展示出来。

    注:test文件指的是自定义组件文件夹;index.js指的是组件的入口加载文件;Test.vue指的是组件模板。

    展开全文
  • vue自定义组件学习

    2018-05-27 01:33:25
    Vue自定义组件,初学者尝试写vue组件过程!前端模块化组件开发
  • vue 自定义组件和通信

    2019-03-07 11:27:52
    vue 自定义组件和通信
  • 一、Vue自定义组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可...

    一、Vue自定义组件

    组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可。
    1.在项目的components里面新建一个组件
    (建议组件名字大写 防止与标签相撞)
    在这里插入图片描述
    2.在组件.vue的script里面写上name
    在这里插入图片描述
    3. 在app.vue里面导入 app.vue属于全局配置
    js中先引入组件
    在这里插入图片描述
    4.引用完一定记得有使用 不然会报错 在template里面使用一下组件
    在这里插入图片描述

    二、Vue组件组件传值

    图解:
    在这里插入图片描述

    1.父传子
    父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。
    ①使用props建立数据通道的渠道

    // 这是父组件
    <div id="app">
    // 这是子组件
        <child message="hello" ></child>
    </div>
    

    ②在子组件中通过props传递过来的数据

    Vue,component('child',{
        props:['message'] 
    })
    

    2.子传父
    子组件可以通过 e m i t 触 发 父 组 件 的 自 定 义 事 件 。 v m . emit触发父组件的自定义事件。vm. emitvm.emit(event,arg) 用于触发当前实例上的事件;
    ①子组件中需要一个点击事件触发一个自定义事件

    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    

    ②在父组件中的子标签监听该自定义事件得到传递的值

    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    

    3.非父子传值
    非父子组件之间传值,需要一个公共的vue来进行传递值和获取值,作为中间仓库来传值,不然路由组件之间达不到传值的效果

    展开全文
  • 主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
  • Vue自定义组件

    千次阅读 2017-02-27 15:06:35
    vue-component var vue; $(function(){ //自定义组件 Vue.component('custom-template',//组件名 { props:['param'],//组件接受外部参数 temp
  • Vue自定义组件 Vue.component

    千次阅读 2018-09-16 23:32:35
    Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教程还是写的简单易懂的。 Component是Vue.js最核心的功能,...
  • 主要介绍了vue 自定义组件的写法与用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 1.首先创建一个自定义组件 Vue.component('test-component',{ template:`<div id="el"><input @input="change"><button @click="getInputData">点我看input数据</button></div>`, ...
  • 本文给大家分享vue自定义组件的四种方式,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • vue自定义组件(超详细)

    千次阅读 2020-12-23 20:17:35
    #vue自定义组件的使用方法
  • 主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • VUE 自定义组件,调用组件 在做项目的过程中我们会遇到很多重复性的功能或者页面布局,我们可以把这些可以进行多次使用的代码进行封装,变成组件。 这是一个头部卡片组件 在制作页面时经常会用到类似这种的卡片头部...
  • 父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
  • 本文通过实例代码给介绍了vue使用自定义组件实现通讯录功能,需要的朋友可以参考下
  • 主要介绍了vue自定义组件(通过Vue.use()来使用)即install的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue自定义组件 简单 简单的时间线 (simple-vue-timeline) A timeline vue component which leverages the use of common libraries: 时间轴Vue组件,利用了公共库的使用: bootstrap vue components, 引导vue组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,198
精华内容 31,279
关键字:

vue自定义组件

vue 订阅