精华内容
下载资源
问答
  • vue给组件传递不同的值

    千次阅读 2018-03-31 20:24:43
    这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递多个组件,这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用。 &...

    这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue实例:父组件给子组件传递不同的值</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    </head>
    <script>
    window.onload = function(){
        //全局创建一个Vue组件
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
    
        //创建一个vue实例
        var app7 = new Vue({
            el: '#app',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            }
        })
    }
    
    </script>
    <body>
        <div id="app">
            <ol>
                <!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”。-->
                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
            </ol>
        </div>
    </body>
    </html>
    

    代码分析:

    这里我直接使用了一个Vue的CDN,然后实例化Vue对象就可以使用。

    • 创建一个vue实例
        var app7 = new Vue({
            el: '#app',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '随便其它什么人吃的东西' }
                ]
            }
        })
    

    • 全局创建一个Vue组件
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
    
    • 通过Vue的实例给组件赋不同的值(通过bind绑定值到一个变量上,子组件通过props接受传入的这个变量值)
        <div id="app">
            <ol>
                <!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”。-->
                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
            </ol>
        </div>
    
    展开全文
  • vue手写签名组件_Vue签名板组件

    千次阅读 2020-07-27 21:29:51
    vue手写签名组件 Vue签名板 (Vue Signature Pad) ... Vue组件包装,用于签名板。 View Demo 查看演示 Download Source 下载源 演示版 (Demo) Demo works in desktop and mobile browsers. You can check o...

    vue手写签名组件

    Vue签名板 (Vue Signature Pad)

    Vue component wrap for signature pad.

    Vue组件包装,用于签名板。

    Signature-Pad

    演示版 (Demo)

    Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

    演示可在台式机和移动浏览器中运行。 您可以查看其源代码,以获取有关如何处理窗口大小调整和高DPI屏幕的一些技巧。 您还可以在HTML5 Rocks教程中找到有关后者的更多信息。

    其他演示 (Other demos)

    安装 (Installation)

    You can install the latest release using npm:

    您可以使用npm安装最新版本:

    npm install --save signature_pad

    or Yarn:

    或纱线:

    yarn add signature_pad

    You can also add it directly to your page using <script> tag:

    您也可以使用<script>标签将其直接添加到页面中:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
    

    You can select a different version at https://www.jsdelivr.com/package/npm/signature_pad.

    您可以在https://www.jsdelivr.com/package/npm/signature_pad中选择其他版本。

    This library is provided as UMD (Universal Module Definition) and ES6 module.

    该库以UMD(通用模块定义)和ES6模块的形式提供。

    用法 (Usage)

    API (API)

    var canvas = document.querySelector("canvas");
    
    var signaturePad = new SignaturePad(canvas);
    
    // Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
    signaturePad.toDataURL(); // save image as PNG
    signaturePad.toDataURL("image/jpeg"); // save image as JPEG
    signaturePad.toDataURL("image/svg+xml"); // save image as SVG
    
    // Draws signature image from data URL.
    // NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
    signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
    
    // Returns signature image as an array of point groups
    const data = signaturePad.toData();
    
    // Draws signature image from an array of point groups
    signaturePad.fromData(data);
    
    // Clears the canvas
    signaturePad.clear();
    
    // Returns true if canvas is empty, otherwise returns false
    signaturePad.isEmpty();
    
    // Unbinds all event handlers
    signaturePad.off();
    
    // Rebinds all event handlers
    signaturePad.on();

    选件 (Options)

    dotSize dotSize
    (float or function) Radius of a single dot.
    (浮点数或函数)单个点的半径。
    minWidth minWidth
    0.5. 0.5
    maxWidth maxWidth
    2.5. 2.5
    throttle 风门
    x milliseconds. Set it to x毫秒最多绘制一次下一个点。 将其设置为 0 to turn off throttling. Defaults to 0以关闭节流。 默认为 16. 16
    minDistance minDistance
    x pixels. Defaults to x像素远时才添加下一个点。 默认为 5. 5
    backgroundColor 背景颜色
    context.fillStyle. Defaults to context.fillStyle接受的任何颜色格式。 默认为 "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgba(0,0,0,0)" (透明黑色)。 如果要将签名保存为JPEG图像,请使用非透明颜色,例如 "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images. "rgb(255,255,255)" (不透明白色)。
    penColor penColor
    context.fillStyle. Defaults to context.fillStyle接受的任何颜色格式。 默认为 "black". "black"
    velocityFilterWeight velocityFilterWeight
    0.7. 0.7
    onBegin onBegin
    (function) Callback when stroke begin.
    (功能)中风开始时的回调。
    onEnd 结束
    (function) Callback when stroke end.
    (功能)行程结束时进行回调。

    You can set options during initialization:

    您可以在初始化期间设置选项:

    var signaturePad = new SignaturePad(canvas, {
        minWidth: 5,
        maxWidth: 10,
        penColor: "rgb(66, 133, 244)"
    });

    or during runtime:

    或在运行时:

    var signaturePad = new SignaturePad(canvas);
    signaturePad.minWidth = 5;
    signaturePad.maxWidth = 10;
    signaturePad.penColor = "rgb(66, 133, 244)";

    技巧和窍门 (Tips and tricks)

    处理高DPI屏幕 (Handling high DPI screens)

    To correctly handle canvas on low and high DPI screens one has to take devicePixelRatio into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via SignaturePad#fromDataURL. Here's an example how it can be done:

    为了在低DPI和高DPI屏幕上正确处理画布,必须考虑devicePixelRatio并相应地缩放画布。 为了正确显示通过SignaturePad#fromDataURL加载的SignaturePad#fromDataURL也必须进行此缩放。 这是一个示例如何完成的:

    function resizeCanvas() {
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    }
    
    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();

    Instead of resize event you can listen to screen orientation change, if you're using this library only on mobile devices. You can also throttle the resize event - you can find some examples on this MDN page.

    如果仅在移动设备上使用此库,则可以监听屏幕方向的变化,而不是resize事件。 您还可以限制resize事件-您可以在此MDN页面上找到一些示例。

    When you modify width or height of a canvas, it will be automatically cleared by the browser. SignaturePad doesn't know about it by itself, so you can call signaturePad.clear() to make sure that signaturePad.isEmpty() returns correct value in this case.

    修改画布的宽度或高度时,浏览器会自动清除它。 SignaturePad本身并不了解它,因此在这种情况下,您可以调用signaturePad.clear()以确保signaturePad.isEmpty()返回正确的值。

    This clearing of the canvas by the browser can be annoying, especially on mobile devices e.g. when screen orientation is changed. There are a few workarounds though, e.g. you can lock screen orientation, or read an image from the canvas before resizing it and write the image back after.

    浏览器对画布的这种清除可能很烦人,尤其是在移动设备上,例如,当屏幕方向改变时。 但是,有一些解决方法,例如,您可以锁定屏幕方向 ,或者在调整大小之前从画布读取图像,然后再写回图像。

    在服务器端处理数据URI编码的图像 (Handling data URI encoded images on the server side)

    If you are not familiar with data URI scheme, you can read more about it on Wikipedia.

    如果您不熟悉数据URI方案,则可以在Wikipedia上阅读有关它的更多信息。

    There are 2 ways you can handle data URI encoded images.

    有两种方法可以处理数据URI编码的图像。

    You could simply store it in your database as a string and display it in HTML like this:

    您可以简单地将它作为字符串存储在数据库中,并以HTML形式显示,如下所示:

    <img src="data:image/png;base64,iVBORw0K..." />

    but this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.

    但是这种方式有很多缺点-获取图像尺寸并不容易,您无法操纵它(例如创建缩略图),并且在移动设备上存在一些性能问题

    Thus, more common way is to decode it and store as a file. Here's an example in Ruby:

    因此,更常见的方法是对其进行解码并存储为文件。 这是Ruby中的示例:

    require "base64"
    
    data_uri = "data:image/png;base64,iVBORw0K..."
    encoded_image = data_uri.split(",")[1]
    decoded_image = Base64.decode64(encoded_image)
    File.open("signature.png", "wb") { |f| f.write(decoded_image) }

    Here's an example in PHP:

    这是PHP中的示例:

    $data_uri = "data:image/png;base64,iVBORw0K...";
    $encoded_image = explode(",", $data_uri)[1];
    $decoded_image = base64_decode($encoded_image);
    file_put_contents("signature.png", $decoded_image);

    Here's an example in C# for ASP.NET:

    这是ASP.NET的C#示例:

    var dataUri = "data:image/png;base64,iVBORw0K...";
    var encodedImage = dataUri.Split(",")[1];            
    var decodedImage = Convert.FromBase64String(encodedImage);
    System.IO.File.WriteAllBytes("signature.png", decodedImage);

    删除签名周围的空白区域 (Removing empty space around a signature)

    If you'd like to remove (trim) empty space around a signature, you can do it on the server side or the client side. On the server side you can use e.g. ImageMagic and its trim option: convert -trim input.jpg output.jpg. If you don't have access to the server, or just want to trim the image before submitting it to the server, you can do it on the client side as well. There are a few examples how to do it, e.g. here or here and there's also a tiny library trim-canvas that provides this functionality.

    如果要删除签名周围的空白空间,可以在服务器端或客户端上进行。 在服务器端,您可以使用例如ImageMagic及其trim选项: convert -trim input.jpg output.jpg 。 如果您无权访问服务器,或者只想在将图像提交到服务器之前修剪图像,则也可以在客户端进行操作。 这里有一些示例,例如在此处此处 ,还有一个很小的库装饰画布可以提供此功能。

    绘制图像 (Drawing over an image)

    Demo: https://jsfiddle.net/szimek/d6a78gwq/

    演示: https : //jsfiddle.net/szimek/d6a78gwq/

    翻译自: https://vuejsexamples.com/vue-signature-pad-component/

    vue手写签名组件

    展开全文
  • 1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...

    1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法

    props: {
      echartStyle: {
        type: Object,
        default() {
          return {}
        }},
        titleText: {
          type: String,
          default: ''
        },
        tooltipFormatter: {
          type: String,
          default: ''
        },
        opinion: {
          type: Array,
          default() {
            return []
          }
        },
        seriesName: {
          type: String,
          default: ''
        },
        opinionData: {
          type: Array,
          default() {
            return []
          }
        }

    }

    //watch进行监听

    watch:{
      titleText:function(newValue,oldValue){
        this.getChange();
      },
      echartStyle:{
        handler(newValue,oldValue){
           this.getChange();
        },
        deep:true
      },
      tooltipFormatter:function(newValue,oldValue){
        this.getChange();
      },
      opinion:{
        handler(newValue,oldValue){
          this.getChange();
        },
        deep:true //深度监听
      },
      seriesName:function(newValue,oldValue){
        this.getChange();
      },
      opinionData:{
        handler(newValue,oldValue){
          this.getChange();
        },
        deep:true
      }
    
    },
    2 在父组件中用ref="str" 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法
    来 重新渲染(暂时使用有bug,不能够及时渲染,父组件值已经改变了,但是子组件值仍然没有改变,不能够及时渲染)

       这个方法感觉props'接收数据在调用方法之后,明明父组件的值已经改变了,但是父组件在调用子组件方法时,数据仍然没有  接收到,调用之后才接收到,这个方法暂且没用,应该是声明ref的时候声明的是当前组件的实例,然后调用时调用的也是值未改变时的属性。这个没什么用,可以用来调用子组件方法。

    <pie-chart2   ref="pieChart"
      :echartStyle="echartStyle"  :titleText="titleText" :tooltipFormatter="tooltipFormatter"
      :opinion="opinion"  :seriesName="seriesName" :opinionData="opinionData"
    
    >
    </pie-chart2>
     
    refresh:function(){
      if(!this.bindData.data){
        this.bindData.data = this.bindData.configures;
      }
      this.bindData.id = this.bindData.moduleId ||'pir';
      if(this.bindData.data){
        alert(this.bindData.data.name);
        this.changeContent(this.bindData.data);
        this.getChartData(this.bindData.data);
        this.$refs.pieChart.getChange();
      }
    
    },

    3 在子组件上使用 v-if ="flag" (谢谢各位老哥的建议)

    初始flag:true

    修改data时

    changData(data){

    this.flag = false

    this.data =data

    this.$nexTick(()=>{

    this.flag = true;

    })

    }

      

      

    展开全文
  • Vue组件

    万次阅读 多人点赞 2021-01-25 15:43:45
    Vue组件(一)      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项 &...

    Vue组件

         Vue组件介绍
         Vue组件使用步骤
         Vue组件的使用
         组件中data 和 el 选项
         使用 <script><template> 标签
         组件之间的通信
         通过props向子组件传递数据
         Vue的插槽




    Vue组件

    组件系统是Vue中一个重要的概念,他提供了一种抽象,可以独立使用和可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件是可复用的Vue实例,切带有一个名字。组件可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。




    Vue组件使用步骤

        1.Vue组件的使用有以下3个步骤:

            1. 创建组件:调用Vue.extend()方法创建组件
            2. 注册组件:调用Vue.component()方法注册组件
            3. 使用组件:使用Vue实例页面内自定义标签组件


        2.样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    <body>
    	<div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h2>使用Vue组件</h2>"
    			});
    			//注册组件
    			Vue.component("mycomp",myComp);
    			//实例化组件
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    </body>
    </html>
    

    注意:组件的命名方式有两种:

    1. kebab-case(短横线分隔命名)
    2. PasecalCase(首字母大写命名)
      因为直接在DOM中使用时只有 kebab-case(短横线分隔命名)是有效的,所有一般推荐 kebab-case(短横线分隔命名)方式命名。




    Vue组件使用

    组件注册

        1.全局注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h2>使用Vue组件</h2>"
    			});
    			//注册组件
    			Vue.component("mycomp",myComp);
    			//实例化组件
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    

        2.局部注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			//创建组件
    			var myComp=Vue.extend({
    				template:"<h3>使用局部Vue组件</h3>"
    			})
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"mycomp":myComp//局部注册组件
    				}
    			})
    		</script>
    

        3.组件语法糖

    - 简化全局注册

     <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			Vue.component("my-comp",{
    				template:"<div><h3>使用Vue组件</h3></div>"
    			})
    			var vm=new Vue({
    				el:"#app"
    			})
    			
    </script>
    

    - 简化局部注册
    <div id="app">
    		<!--使用组件-->
    		<mycomp></mycomp>
    	</div>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				//局部注册,mycomp是组件标签名
    				components:{
    						"mycomp":{
    						template:"<div><h3>使用Vue组件</h3></div>"
    					}
    				}
    			})
    			
    		</script>
    




    组件中data 和 el 选项

        一般实例化Vue的多数选项也可以用在Vue.extend)或Vue .component()中的,不过有两个特殊选项参数除外即data和el。Vue.js 规定:在定义组件的选项时,data 和el选项必须使用函数。如果data选项指向某个对象,这意味着所有的组件实例共用一个data。使用一个函数作为data选项,让这个函数返回一个新对象。


        1. 全局注册组件语法
    <script>
    //全局注册组件
    			Vue.component("组件名称"{
    						el:function(){...},
    						data:function(){
    							return{
    								属性:值
    							}
    						},
    						template:"组件模板"
    					}
    				}
    			})
    		</script>
    

        2. 局部注册组件语法
    <script>
    //局部注册组件
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"组件名称":{
    						el:function(){...}
    						data:function(){
    							return{
    								属性:值
    							}
    						},
    						template:"组件模板"
    					}
    				}
    			})
    		</script>
    

        3. 样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<h3>新奇水果</h3>
    			<fruit-list-comp></fruit-list-comp>
    		</div>
    		<template id="fruitTemplate">
    			<div>
    				<ul>
    					<li v-for="fruit in items">{{fruit}}</li>
    				</ul>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"fruit-list-comp":{
    						data:function(){
    							return{
    								items:["火龙果","苹果","西瓜","草莓"]
    							}
    						},
    						template:"#fruitTemplate"
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    





    使用 <script><template> 标签

        尽管语法糖简化了组件注册,但在template 选项中拼接HTML元素比较麻烦,这也导致了HTML 和JavaScript 拼接的高耦合性。所有Vue提供了两种方式将定义在 JavaScript 中的 HTML 模板分离出来。

        1.使用 script 标签
    <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    	<script type="text/javascript" id="myComp">
    		<div>
    			<h4>使用Vue组件</h4>
    		</div>
    	</script>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			Vue.component("my-comp",{
    				template:"#myComp"
    			});
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"my-comp":{
    						template:"#myComp"
    					}
    				}
    				
    			})
    		</script>
    
    

        template选项现在不再是HTML元素,而是一个id。Vue.js根据这个id查找对应的元素,然后将这个元素内的HTML作为模板进行编译

        2. 使用 template 标签

        如果使用 <template> ,则不需要指定type属性

    <div id="app">
    		<!--使用组件-->
    		<my-comp></my-comp>
    	</div>
    	
    	<template id="myComp">
    		<div>
    			<h4>使用Vue组件</h4>
    		</div>
    	</template>
    	
    		<script>
    			//全局注册,my-comp是组件标签名
    			
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"my-comp":{
    						template:"#myComp"
    					}
    				}
    				
    			})		
    		</script>
    




    组件之间的通信

        1.组件中通信6个步骤:

    1. var child=Vue.extend({…});/创建子组件
    2. var parent=Vue.extend({ …});//创建父组件
    3. template:"<p>这是父组件<child-compont></child-compont></p>"//在父组件内以标签的形式使用子标签
    4. components:{ “child-compont”:child//注册子组件} //将子组件注册到父组件,并将子组件的标签设置为child-compont
    5. Vue.component(“parent-compont”,parent) //全局注册父组件
    6. 在页面中使用<parent-compont></parent-compont>标签渲染父组件内容,同时子组件的内容也被渲染出来


        2.样例Demo

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<parent-compont></parent-compont>
    		</div>
    		<script>
    			//创建子组件
    			var child=Vue.extend({
    				template:"<p>这是子组件</p>"
    			});
    			//创建父组件
    			var parent=Vue.extend({
    				//在父组件中使用parent-compont标签
    				template:"<p>这是父组件<child-compont></child-compont></p>",
    				components:{
    					"child-compont":child//注册子组件
    				}
    			});
    			//注册父组件
    			Vue.component("parent-compont",parent)
    			var vm=new Vue({
    				el:"#app"
    			})
    		</script>
    	</body>
    </html>
    

        3.书写错误的两种方式
    1. 以子标签的形式在父组件中使用
    <div id="app">
    	<parent-compont>
    		<child-compont></child-compont>
    	</parent-compont>
    </div>
    
    1. 在父组件标签外使用子标签
    <div id="app">
    	<parent-compont></parent-compont>
    	<child-compont></child-compont>
    </div>
    




    通过props向子组件传递数据

       组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据,可以使用props把数据传给子组件。一个组件可以默认拥有任意数量的props(属性),任何值都可以传递给任何props。在组件中,使用选项props来声明需要从父组件中接收的数据。props的值可以是两种:一种是字符串数组,另一种是对象

        1. props的值是字符串数组
    var component=Vue.extend({
    				props:["属性名",...,"属性名"],
    				template:"模板"
    })
    

        2. props的值是字符串对象
    var component=Vue.extend({
    	props:{
    				"属性名:String",
    				"属性名:Number",
    				"属性名:Boolean"
    			},
    	template:"模板"
    })
    

        3.样例Demo
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../js/vue.min.js"></script>
    		<style type="text/css">
    			.banner{
    				background-color: rgb(46,110,194);
    				color: rgb(255,255,255);
    				width: 600px;
    				height: 50px;
    				line-height: 600px;
    				text-align: center;
    				padding: 20px;
    				margin: 0 auto;
    			}
    			span{
    				font-feature-settings: 0.6em;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<!--isShowStyle 动态绑定属性-->
                <!--message 静态绑定属性-->
    			<banner-component v-bind:is-style="isShowStyle" message="Happy一下"></banner-component>
    		</div>
    		<!--子组件-->
    		<template id="childComp">
    			<span>{{subMessage}}</span>
    		</template>
    		
    		<!--父组件-->
    		<template id="parentComp">
    			<div>
    				<!--banner:isStyle 动态绑定属性-->
    				<h2 :class="{ banner:isStyle}">
    					{{message}}
    					<!--sub-message(短横线分隔方式命名) 静态绑定属性-->
    					<child-component sub-message="不玩就out了"></child-component>
    				</h2>
    			</div>
    			
    		</template>
    
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					isShowStyle:true
    				},
    				components:{
    					"banner-component":{
    						props:["message","isStyle"],//props字符串
    						template:"#parentComp",//注册父组件
    						components:{
    							"child-component":{
    								props:{//props对象
    									subMessage:String//驼峰式命名
    								},
    								template:"#childComp",//注册子组件
    							}
    						}
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    



    Vue的插槽

         插槽是Vue提出来的一个概念,用于将携带的内容插入到指定位置,从而从而使模块化,具有的模块化的特质和更大重要性。插槽显不显示,怎样显示是由父组件来控制,而插槽在哪里显示就有子组件来进行控制。

        1. 插槽的使用

      插槽一般在Vue的父子组件中使用,在子组件中使用标签将不同的DOM树组合在一起。 标签是组件内部的占位符,用户可以使用自己的标记来填充。通过定义一个或多个标签,可将外部标记引入到组件的虚拟DOM中进行渲染,相当于“在此处渲染用户的标记”。插槽有两种使用方式:默认插槽和具名插槽。

    1. 默认插槽
           声明组件模板中包含一个插槽标签,然后使用组件时将组件内容部分填充到插槽中。
     
     <div id="app">
    			<p-comp>需要分发的内容</p-comp>
    		</div>
    		<template id="pComp">
    			<div>
    				<h3>使用默认插槽</h3>
    				<slot></slot>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"p-comp":{
    						template:"#pComp"
    					}
    				}
    			})
    		</script>
    
    1. 具名插槽
           默认插槽只能有一个,当需要多个插槽时,就需要具名插槽了。
    <div id="app">
    			<p-comp>
    				<template slot="header">
    					<div>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽填充内容
                    -->
    					<h3>商品管理</h3>
    				</template>
    				商品管理内容
    				<template slot="foots">
    					<h6>版权声明</h6>
    				</template>
    			</p-comp>
    		</div>
    		<template id="pComp">
    			<div>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽
                    -->
    				<slot name="header"></slot>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:默认插槽
                    -->
    				<slot></slot>
    				<!--
                    	作者:offline
                    	时间:2021-01-26
                    	描述:具名插槽
                    -->
    				<slot name="foots"></slot>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				components:{
    					"p-comp":{
    						template:"#pComp"
    					}
    				}
    			})
    		</script>
    

        2. 作用域插槽的使用

         插槽可以控制HTML模板的显示与不显示。作用域插槽( slot-scope)其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件,而作用域插槽可以通过子组件绑定数据传递给父组件。作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			<book-list :books="bookList">
    				<template slot="book" slot-scope="props">
    					<li>{{props.bookname}}</li>
    				</template>
    			</book-list>
    		</div>
    		<template id="bookComp">
    			<div>
    				<ul>
    					<slot name="book" v-for="book in books" :bookname="book.name"></slot>
    				</ul>
    			</div>
    		</template>
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					bookList:[
    					{name:"《111》"},
    					{name:"《222》"},
    					{name:"《333》"}
    					]
    				},
    				components:{
    					"book-list":{
    						props:["books"],
    						template:"#bookComp"
    					}
    				}
    			})
    		</script>
    
    	</body>
    </html>
    
    展开全文
  • vue非父子组件通信 (两个不同组件通信)
  • vue组件给组件传值

    万次阅读 多人点赞 2018-08-21 10:28:12
    组件: &lt;template&gt;  &lt;div class="app"&gt;  &...组件传递值"&gt;  &lt;/div&gt; &lt;/template&gt; &lt;script&gt
  • Vue教程(组件-父子组件传值)

    万次阅读 多人点赞 2019-07-29 17:10:37
    组件传值组件 1.案例场景   我们先准备下基础页面,具体如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
  • Vue2.0 子组件传值组件

    万次阅读 2017-03-31 11:25:14
    this.$emit(event,...args); /* * event: 要触发的事件 * args: 将要传组件的参数 */ Usage: 子组件内容: <div @click="iclick"></div> methods:{ iclick(){ let data = { a:'data
  • vue-自定义组件传值

    万次阅读 热门讨论 2017-12-23 16:55:48
    ​ 项目中,我们经常会遇到自定义组件...​ 在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop组件下发数据,子组件通过事件组件发送消息。常规prop-event父组件<prop-event-
  • 教女朋友学习 vue中的组件

    万次阅读 多人点赞 2020-04-28 15:56:48
    这篇博客对Vue组件的基本知识做了详细的介绍,并有完整的示例。
  • 【vue】vue组件传值的三种方式

    万次阅读 多人点赞 2018-10-22 14:09:02
    前言 vue的组件传值分为三种方式:父传子、子传父、非父子组件传值 ...下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1、父传子 子组件的代码: &lt;template&gt; ...
  • vue 常用ui组件

    万次阅读 2017-11-30 17:04:19
    vue 常用ui组件
  • vue 全局组件注册With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js...
  • Vue单文件组件

    千次阅读 2020-05-01 21:32:36
    传统Vue组件的缺陷: 全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中) 没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel) 解决方案: 使用Vue单文件...
  • vue可视化组件

    千次阅读 2019-03-20 16:30:19
    vue开发的可视化组件,包含柱状图组件,圆形进度条组件: 使用方式: NPM下载安装vue-charts-jf npm install vue-charts-jf --save import vueChart from 'vue-charts-jf' Vue.use(vueChart); ...
  • vue侧边栏组件_Vue.js侧边栏菜单组件

    千次阅读 2020-07-27 17:59:57
    vue侧边栏组件 边栏菜单 (vue-sidebar-menu) A Vue.js Sidebar Menu Component. Vue.js侧栏菜单组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm i vue-sidebar-menu --save 用法 ...
  • Vue - 自定义组件

    万次阅读 2018-09-24 17:48:11
    这篇文章介绍Vue的自定义组件。定义全局组件的第一种方式: html代码:定义全局组件的第二种方式: html代码:定义全局组件的第三种方式: html代码: 常用的方式是第三种,原因: (1)在工作中模板中肯定有很多...
  • Vue.js组件注册自定义组件不成功

    千次阅读 2018-08-30 16:04:23
    Vue.js组件注册自定义组件不成功 Vue.js组件注册自定义组件不成功: 报下列错误: vue.js:584 [Vue warn]: Unknown custom element: &lt;buttoncount&gt; - did you register the component correctly...
  • vue关于父组件传递参数组件

    千次阅读 2018-01-25 17:30:21
    一、首先,我们要在父组件中拿到需要传递的值,例如: ...三、在子组件.vue中接收传过来的参 然后就可以直接在dom中引用啦,例如:渲染传过来的图片 img :src="img" width="100%" height="1
  • vue嵌入react组件

    千次阅读 2020-04-24 17:12:50
    vue中嵌入react组件,直接上图,下图为一个开源的jsoneditor...在需要引入的vue组件中引入, package.json文件需要引入的资源包vuerareact react-dom等等 .babelrc文件中需要修改的地方 vue...
  • Vue组件给组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传组件 3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在...
  • vue 注册子组件

    千次阅读 2018-06-15 15:05:17
    vue 组件注册 注册一个子组件并引用 在父组件中引入子组件 import sonComponents from &quot;./son.vue&quot; 在components中注册该组件 export default { data(){ return{ } }, ...
  • vue刻度尺组件

    千次阅读 2020-07-09 09:32:23
    vue刻度尺组件 刻度尺:参考文档:https://python.ctolib.com/328921371-ruler.html npm install cs-ruler // 在 main.js 中引入 import CsRuler from 'cs-ruler' Vue.use(CsRuler) // 在.vue文件中使用 <...
  • vue评论回复组件

    千次阅读 2020-12-15 09:52:13
    vue评论回复组件 1.使用下面命令下载hbl-comment组件 npm i bright-comment 2、下载完成之后在项目中引入 import comment from 'bright-comment' components:{ comment }, 3、使用 <comment></...
  • Vue.js 组件

    千次阅读 2020-08-31 00:56:45
    vue组件 组件 (Component) 是 Vue.js 最强大的功能之一, 创建组件 <body> <div id="app"> <button-counter></button-counter> </div> <script type="text/...
  • vue——动态组件

    万次阅读 2017-12-27 19:38:13
    通过使用保留的 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。...Vue 测试实例 - 动态组件 点击显示子组件 // 创建根实例 new Vue({ el: '#app', da
  • Vue引入公共组件

    千次阅读 2019-05-09 12:51:58
    Vue引入公共组件vue页面1需要引入子组件vue页面2子组件vue页面2内容为正常的vue页面,无需任何修改 vue页面1需要引入子组件vue页面2 1.在Vue页面1中添加 <template> <Header></Header>//直接...
  • 组件是如何组件传值呢?我总结了一下大体的方法,如下: 父组件调用子组件的时候 绑定动态属性 &amp;amp;lt;v-header :title=&amp;quot;title&amp;quot;&amp;amp;gt;&amp;amp;lt;/v...
  • Vue不同组件之间相互传值

    千次阅读 2017-09-04 21:55:57
    使用一个空Vue实例来进行传值,通过$emit,$on即可。<!DOCTYPE html> <title></title> <script src="./main/vue.js"> <body>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 340,567
精华内容 136,226
关键字:

vue给不同的组件

vue 订阅