ホームページ >ウェブフロントエンド >jsチュートリアル >vueでのextend、mixins、extends、components、installの操作について
この記事では、主に Vue での extend、mixins、extends、components、install の操作を紹介します。必要な友達はそれを参照できるように共有します。 mixins、extend、コンポーネント、インストールの使用法をご存知ですか?
それらの違いをご存知ですか?2. グローバルです
1.Vue.extend
1. vue コンストラクターを使用します。サブクラス、パラメーターはコンポーネント オプションを含むオブジェクトです
// 创建构造器 var Profile = Vue.extend({ template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签 data: function () { return { extendData: '这是extend扩展的数据', } }, props:['propsExtend'] }) // 创建 Profile 实例,并挂载到一个元素上。可以通过propsData传参. new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')
Vue.extend は実際にコンストラクター、対応する初期化コンストラクターを作成し、それをラベルにマウントします
2.Vue.component
1 へようこそ。Vue.extend によって生成された拡張インスタンス コンストラクターを
global//1.创建组件构造器 var obj = { props: [], template: '<p><p>{{extendData}}</p></p>',//最外层只能有一个大盒子,这个和<tempalte>对应规则一致 data: function () { return { extendData: '这是Vue.component传入Vue.extend注册的组件', } }, }; var Profile = Vue.extend(obj); //2.注册组件方法一:传入Vue.extend扩展过得构造器 Vue.component('component-one', Profile) //2.注册组件方法二:直接传入 Vue.component('component-two', obj) //3.挂载 new Vue({ el: '#app' }); //获取注册的组件 (始终返回构造器) var oneComponent=Vue.component('component-one'); console.log(oneComponent===Profile)//true,返回的Profile构造器3. 値は混合オブジェクトの配列にすることができ、混合インスタンスにはオプションを含めることができます。同じオプションは extendmixins コードにマージされます:
var mixin={ data:{mixinData:'我是mixin的data'}, created:function(){ console.log('这是mixin的created'); }, methods:{ getSum:function(){ console.log('这是mixin的getSum里面的方法'); } } } var mixinTwo={ data:{mixinData:'我是mixinTwo的data'}, created:function(){ console.log('这是mixinTwo的created'); }, methods:{ getSum:function(){ console.log('这是mixinTwo的getSum里面的方法'); } } } var vm=new Vue({ el:'#app', data:{mixinData:'我是vue实例的data'}, created:function(){ console.log('这是vue实例的created'); }, methods:{ getSum:function(){ console.log('这是vue实例里面getSum的方法'); } }, mixins:[mixin,mixinTwo] }) //打印结果为: 这是mixin的created 这是mixinTwo的created 这是vue实例的created 这是vue实例里面getSum的方法結論:
3.extends
extends の使用法は、受け取ったパラメーターが単純なオプションオブジェクトまたはコンストラクターであることを除いて、ミックスインと非常によく似ています。 extends は一度に 1 つのコンポーネントしか拡張できません
var extend={ data:{extendData:'我是extend的data'}, created:function(){ console.log('这是extend的created'); }, methods:{ getSum:function(){ console.log('这是extend的getSum里面的方法'); } } } var mixin={ data:{mixinData:'我是mixin的data'}, created:function(){ console.log('这是mixin的created'); }, methods:{ getSum:function(){ console.log('这是mixin的getSum里面的方法'); } } } var vm=new Vue({ el:'#app', data:{mixinData:'我是vue实例的data'}, created:function(){ console.log('这是vue实例的created'); }, methods:{ getSum:function(){ console.log('这是vue实例里面getSum的方法'); } }, mixins:[mixin], extends:extend }) //打印结果 这是extend的created 这是mixin的created 这是vue实例的created 这是vue实例的getSum里面的方法
4.components
ローカルコンポーネント
//1.创建组件构造器 var obj = { props: [], template: '<p><p>{{extendData}}</p></p>',//最外层只能有一个大盒子,这个和<tempalte>对应规则一致 data: function () { return { extendData: '这是component局部注册的组件', } }, }; var Profile = Vue.extend(obj); //3.挂载 new Vue({ el: '#app', components:{ 'component-one':Profile, 'component-two':obj } });
以上がこの記事の内容全体です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
React コンポーネントと state|props の分析については
config/index.js の詳細な説明については: vue での設定
以上がvueでのextend、mixins、extends、components、installの操作についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。