vue 混合开发 和 组件
刚开始接触vue时，没有什么组件意识，对于混合开发还没接触，一个页面的所有逻辑都写在一个.vue文件中，逻辑比较简单的还比较好，没有很明显的差别，但是对于逻辑比较复杂的，问题就出现了，首先，加载比较慢，而且代码冗长，不利于代码的维护和梳理。
这个时候接触到组件，用组件开发，可以把一个模块分割为多个子模块，每个模块代表着一种逻辑，这样的好处就体现出来了，维护比较简单，而且每个模块的代码比较少，相对加载也比较快，最主要是每个模块，是一个逻辑，对于以后的更改比较方便。
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个  prop：
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
<div id="app-7">
<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.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})

我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。
对于组件的使用，需要注意的点：
对于组件间的参数传递，使用的是props，而子组件是不能在组件中更改父组件的字段的，除非该字段是个json，这样你对其json中的某个属性进行修改，它会自动更新父组件中的该数据。
如果，没办法，必须修改父组件中的单个属性，你可以使用组件间的交互，使用$emit把修改提交到父组件，在父组件中接收并修改该字段。
还有一种常用方法，从父组件传到子组件的并不是某个属性，而是一个方法，这种操作，可以很方便的在子组件中调用父组件的方法，达到改变某个变量的目的。
还有一个值得注意一下，对于数据的绑定，数据的绑定都是指向储存空间的，也就是说，单纯的改变他的数据并没有什么作用。
例如：
this.lastTIme = this.endTime
this.lastTime = 10
this.endTime = 11
console.log(this.lastTime) // 11
这就是指向问题，类似于指针，这类问题在组件间赋值，会出现很多莫名其妙的bug，明明我没有改变某个字段，但它确确实实改变了。
所以对于有些赋值，需要特殊的方法，推荐一个简单粗暴的方法
let currentCameraInfo = JSON. parse (JSON. stringify (cameraInfo))
这样，它与之前的字段就没有任何关系了，只是数据一样而已。
在此也推荐一个 工具库： https://lodash.com/

对于混合开发，我在开始使用时，感觉和组件有差别，但是差别不大，可以混用。
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
例子：
// 定义一个混合对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}

// 定义一个使用混合对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"
混合开发，有可能没接触过混合开发的人，对于混合开发不太理解，说句废话，混合开发顾名思义就是“混合开发“，他就好像把组件中的一些方法逻辑，提取出来，放入mixins中，然后在组件中引用该mixins，他和子组件相似，都是把逻辑分离出去，然后在需要的组件中调用。
对于混合开发有一个特性，组件会覆盖同类型方法和属性，也就是像css优先级一样，组件永远高于mixin，一个事件，在mixins和组件中同时调用，组件中该事件的优先级更高，将会覆盖mixin中的该事件。
当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的 钩子将在组件自身钩子 之前 调用 ：
var mixin = {
created: function () {
console.log('混合对象的钩子被调用')
}
}

new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})

// => "混合对象的钩子被调用"
// => "组件钩子被调用"
值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}

var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意：Vue.extend() 也使用同样的策略进行合并。
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}
对于大多数对象选项，可以使用 methods 的合并策略：
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue