在vue开发中,我们经常需要在子组件使用父组件的数据,父组件使用子组件的数据,其实vue提供了这两个方法。1.子组件向父组件传值,在父组件内声明变量,子组件接受用props:例如.父组件: <template>
<div>
{{message }}{{num}}
<br />
<hello :num="num"></hello>
</div>
</template>
<script>
import hello from "@/components/HelloWorld"
export default {
data(){
return{
message:"我是父组件我要传的值是:",
num:10,
}
},
...
模块化开发是保证每个文件都是独立的模块,不受外界干扰,提高性能,便于后期维护与团队开发。 可以引入官网的模块,也可以自定义模块。使用require()引入需要使用的模块,自定义的模块在使用之前需要通过module.exports 暴露出去。通过npm init -y 下载package.json文件管理维护模块,其中 main 为入口文件 ,dependencies 指定项目开发与上线需要的模块 ,devdependeciens 指定项目开发中需要而上线时不需要的模块。var as=requ...
一、组件间的通信 组件实例的作用域是孤立的;这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。 在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。如下图所示:二、 Prop — 父组件传递数据给子组件 ...
。。。啥也不说了,难受啊toggle-switch.vue<template><label role="checkbox" :class="[‘switch‘, { toggled }]"><input type="checkbox"class="switch-input"@change="toggle"/><div class="switch-core":style="{backgroundColor: toggled ? colorChecked : colorUnchecked}"><div class="switch-button":style="{transition: `transform ${speed}ms`,transform: toggled ? null: `translate3d(32px, 0px, 0px)`}"></div></d...
组件:一个包含Html,css,js独立的集合体,这样的集合体可以完成页面结构的代码复用 可以相对于理解成封装承一个小模块,能够重复方便使用.组件分为 根组件,全局组件,局部组件 根组件: 所有被new Vue()产生的组件,在项目开发阶段,一个项目只会有一个根组件 全局组件: 不用注册,就可以称为任何一个组件的子组件 局部组件: 必须注册,才可以称为注册该局部组件的子组件 局部组件创建一个局部组件1.创...
实现样式 准备工作,先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" class="mytree"><el-tree:data="data"show-checkboxnode-key="id":default-expand-all="true":props="defaultProps"></el-tree></span>
接下来修改css ,注: 我使用的是 scss,less 也行 .mytree /deep/ {.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node {position: relative;padding-left:...
1.子组件给父组件传递数据
<body><div id="app">父组件:{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件:{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script>
</body>通过v-bind动态绑...
<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div>
</template>
<script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}}
</script>
<...
我后端的,刚接触vue个星期,根据需求写了个上传控件,很灵活的。没有看element el-upload源码,样式用的element的。感觉vue确实好用。<!-- 单文件上传组件 --><template><div><input type="file" id="file" hidden @change="fileChange" :accept="accept"><div v-if="upMode==‘url‘" style="width: 100%;display:inline-flex;"><el-input :value="path" disabled></el-input><el-button size="small" type="primary" @click="bt...
适用于vue的城市选择组件仓库地址基本功能:支持全选、反选以及全部清空。支持按拼音筛选。勾选省份将会勾选省份下所有城市。返回数据可灵活处理。安装npm install cn-region-picker # 或者 yarn add cn-region-picker用法组件引入:
// import包
import CnRegionPicker from 'cn-region-picker'// use
Vue.use(CnRegionPicker)使用: v-model="pickCity"placeholder="城市"
>
</cn-region-picker><!-- 省略代码 -->
data () {ret...
涉及的平台移动端一.公共样式常用变量 var.scss颜色模块主题色、状态色、文本色、灰度色(边框和分隔线)字体字体、大小、行间距 2.控件 3. 三大模块样式、有哪些控件原文:https://www.cnblogs.com/yuxina/p/10173644.html
<div id="app"> {{msg}} <logn v-bind:fuzujian="msg" ></logn> app控制的区域为父组件 logn为私有的子组件 </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"这是父组件的内容" }, methods: {}, components:{ data(){ return{ info:"<h1 >这是私有组件的data值</h1>", ...
前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了。可能一会儿我心情好的时候,可以去整理一下。1、应用的内容:在一个页面中,需要一个固定的内容,这个内容可以多次引用,那么就可以考虑把他分离出来,在下次需要的时候,实现引用就好。比如:<input type="text" v-model="content" >
<button @click = addList>添加</button>
<ul><li v-for="( item ) of tod...
使用方法:1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBox //components:{popUpBox}, 3.放在父组件中使用 //<popUpBox></popUpBox> 4.调用popUpBox组件 //this.geAlert(0) 注:index.vue为 父组件,后者为子组件,效果图先上,可以先看是否是自己想要的组件,再选择使用index.vue<template><div><popUpBox ref="modal" @on-confirm="confirm"><div slot="modal__bd"><div class="m...
组件复用
当前组件被复用(没有被销毁或者创建)的时候,路径会发生改变,但是,值不会发生改变因为:created(){}接收值,但是created只创建一次,在create中接收路径传来的值,所以接收到的值不会发生改变解决方法:监听路由的变化 $route()使用场景:当 一个组件被复用的时候,虽然路由发生变化,但页面上的数据不会发生变化 比如: 从列表页list点击商品,进入商品详情页details查看商品的详细信息,当点击商品时,跳...