vue 构造, vue 组件和 vue 实例这三个是不同的概念, 它们的关系有点类似于 Java 的继承概念:
关系: vue 构造 ->vue 组件 ->vue 实例
也就是说不同的 vue 组件可以共用同一个 vue 构造, 不同的 vue 实例可以共用同一个 vue 组件. 在大型项目中, 用过 java 开发的都知道, 继承是非常重要的, 前端也一样. 我们先看看他们之间的实现代码区别
- <script>
- //vue 构造
- Vue.extend({
- props: [],
- data: function() {
- return {}
- },
- template: ""
- });
- //vue 组件
- Vue.component("mycomponent", {
- props: [],
- data: function() {
- return {}
- },
- template: ""
- });
- //vue 实例
- new Vue({
- el: "",
- data: {}
- });
- </script>
从上面的代码可以看出, vue 构造和 vue 组件所需的部分初始化结构参数是一样的, 这意味着 vue 实例可以直接跳过 vue 组件直接使用 vue 构造对自身组件初始化, 也就是 vue 构造 ->vue 实例, 下面是三种 API 的区别:
vue.extend
特点:
1. 只能通过自身初始化结构
使用范围:
1. 挂载在某元素下
2. 被 Vue 实例的 components 引用
3.Vue.component 组件引用
- <div id="app2"></div>
- <script>
- var apple = Vue.extend({
- template: "<p > 我是构造函数创建: 自身参数:{{a}}| 外部传参:{{b}}</p>",
- data: function() {
- return {
- a: "a"
- }
- },
- props: ["b"]
- });
- // 挂载构造函数
- new apple({
- propsData: {
- b: 'Vue.extend'
- }
- }).$mount('#app2');
- </script>
运行结果:
我是构造函数创建: 自身参数: a | 外部传参: Vue.extend.
Vue.component
特点:
1. 可通过自身初始化组件结构
2. 可通过引入 Vue.extend 初始化组件结构
3. 可通过第三方模板 temple.html 初始化组件结构
使用范围:
任何已被 vue 初始化过的元素内
- <div id="app3">
- <applecomponent v-bind:b="vparam"></applecomponent>
- <mycomponent v-bind:b="vparam"></mycomponent>
- <templecomponent v-bind:b="vparam"></templecomponent>
- </div>
- <script>
- // 方法 1 [引入构造]
- Vue.component('applecomponent', apple);
- // 方法 2 [自身创建]
- Vue.component("mycomponent", {
- props: ["b"],
- data: function() {
- return {
- a: "a"
- }
- },
- template: "<p > 我是 vue.component 创建 自身参数:{{a}}| 外部传参:{{b}}</p>"
- });
- // 方法 3 第三方模板引入, 可参照上一篇文章
- Vue.component('templecomponent', function(resolve, reject) {
- $.get("./../xtemplate/com.html").then(function(res) {
- resolve({
- template: res,
- props: ["b"],
- data: function() {
- return {
- a: "a"
- }
- }
- })
- });
- });
- var app3 = new Vue({
- el: "#app3",
- data: {
- vparam: "Vue.component"
- }
- });
- </script>
运行结果:
我是构造函数创建: 自身参数: a | 外部传参: Vue.component
我是 vue.component 创建 自身参数: a | 外部传参: Vue.component
我是导入模板 自身参数: a | 外部入参: Vue.component
new Vue
this.$options.key 表示其自定义属性值, this.$?? 表示系统属性值, 如 this.$el
特点:
1. 可以通过自身 components 引用 Vue.extend 构造, 通过自身 data 向构造传参
2. 可以通过自身 components 引用组件模板, 通过自身 data 向组件传参
使用范围:
1. 仅限于自身
- <div id="app1">
- <dt1></dt1>
- <vueapple v-bind:b="msg"></vueapple>
- </div>
- <script type="text/x-template" id="dt1">
- <div > 这里是子组件 1</div>
- </script>
- <script>
- new Vue({
- el: "#app1",
- data: {
- msg: "vue 实例参数"
- },
- components: {
- dt1: {
- template: "#dt1"
- },
- vueapple: apple //[引入构造]
- }
- });
- </script>
运行结果:
这里是子组件 1
我是构造函数创建: 自身参数: a | 外部传参: vue 实例参数
来源: http://www.bubuko.com/infodetail-3260449.html