著者| Jeskson
ソース|ダダフロントエンドビストロ
概要Vueのアセンブリ
データはそれが何であるかを最終的に転送データに、アセンブリ小道具の原理をVueの属性、分析のコンポーネントオブジェクトを理解し、それの部品は何ですか。
それらのもののイベント通信
イベント通信と彼の息子のコンポーネントを理解する方法、そして彼の息子は、どのように対処する非イベント通信コンポーネントを検出しました。
どのような地獄は、コンポーネントのタイプです
カスタムコンポーネントの道結合Vモデル、動的コンポーネント、およびどのように呼ばれる動的な、なぜそれがダイナミック、再帰的なコンポーネントは、どのように再帰を理解することです。
Vueの組み立てを学びます
Vueの理解が、私は3つの一般的枠組みが急速に高度なフロントエンド大型コーヒー-Vue根拠をVUE_かを説明vue.js-見つけることができ、コンポーネントは、パッケージの優れた機能の独自の部分に書かれている構成要素である、あなた自身を書きますプラグインコンポーネントを使用すると呼ばれる他の誰かによって書かれたコンポーネントと呼ばれる、強力なvue.jsの一つであり、成分を有するコードの再利用性を向上させることにある、コンポーネントが完全に良いの一部である、あなたが使用したい場合は、あなたが置くことができますあなたは、任意のプロジェクトまで所有し、コードを書くの重複を減らします。
反復的な開発を低下させない、コードコンポーネントは、フォームテンプレートによるスプリット、スタイル、スクリプトこと、および対応するファイルを置くことができ、使用したい場所に直接導入することができます。
それはどのようなテンプレート？テンプレートがどのようなデータを初期化するデータであり、データとユーザのDOMとの間のマッピング関係への最終プレゼンテーションテンプレート（テンプレート）宣言されていますか？コンポーネントの初期データ状態は、成分は、通常プライベート状態、メソッドのメソッドは、転送データと共有小道具パラメータにコンポーネント間の外部パラメータを受信し、データを操作する方法であって、それを再利用することができますデフォルトのパラメータ片道が結合され、双方向結合することができます。
コールバック関数、コンポーネントは、多くのコールバックをトリガすることができ、作成された（）、添付の（）、破壊（）。
Vueのコンポーネント、グローバル登録と部分登録
グローバルレジスタファイル、Vue.component（「部品名」、構成要素パラメータ{}）モードを作成します
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 创建全局组件
Vue.component('my-component",{
// template: 组件的HTML代码结构
template: '<div>this is dada</div>'
});
// Vue实例对象
var vm = new Vue({
el: '#app'
});
</script>
</body>ローカル登録コンポーネントは、必ずしもすべてのコンポーネントが必要とされるグローバルレジスタは、オブジェクト、カスタムコンポーネント登録compontentキーワードのコンストラクタVUEインスタンスに直接かもしれません。
<div id="app">
<local-component></local-component>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// Vue实例UI小
var vm = new Vue({
el: '#app',
// 创建局部组件
components: {
'my-components': {
template: '<div>this is my</div>'
}
}
}
});まず、地元のコンポーネントオブジェクトを作成し、Vueのコンストラクタは、ローカルコンポーネントオブジェクトを登録し、そして最終的には地元のコンポーネントの使用登録。
<div id="app">
// 在默认情况，使用camel标记法将ui自动转换为短横线形式
<local-component></local-component>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 创建局部组件
const localComponent = {
template: '<div>this is da</div>'
}
// vue实例对象
var vm = new Vue({
el: '#app',
// 创建只对当前vue实例对象有效的局部组件
components: {
// 注册组件
localcomponent
}
});
</script>var vm = new Vue({
el: '#app',
// 创建局部组件
components: {
// 注册组件
'my-component': localComponent
}
});コンポーネントオブジェクトの分析
VUE VUEは、コンポーネントインスタンスです。
// 自定义组件
var dada = Vue.component('my-component', {
template: '<h1>dada</h1>'
});総会はまた、この行を単一のルート要素があります。
// 自定义
const dada = Vue.component('my-component', {
template: `
<div>
<span>达达前端</span>
<p> this is da</p>
</div>
`
});アセンブリテンプレートタグの使用：
<div id='app'>
<h1>my-component</h1>
<my-component></my-component>
</div>
<template id="my">
<div>this is dada</div>
<p>this is dadadada</p>
</template>
<script..></script>
<script>
// 自定义组件
const my = Vue.component('my-component", {
template: '#my'
});
// vue实例对象
var vm = new Vue({
el: '#app'
});
</script>
// 会出现程序错误
因为vue组件只允许有一个根元素。
组件template属性中包含div与P两个元素<template id="my">
// 组件只允许有一个根元素
<div>
<div>da</div>
<p>da</p>
</div>
</template>
// 成功部品データのプロパティVUE
アセンブリには、任意の有効なオブジェクトのプロパティインスタンスのVue。データプロパティは、データオブジェクトのVueの一例である応答Vueの使用可能なコンポーネントデータです。あなたがインスタンスを作成した後、ユーザーがVMできます。元のデータオブジェクトへの$データアクセスを、Vueの例は、データのすべての属性を表します。
それは、彼らが競合する可能性があるため、。Data.a、属性の先頭に「_」または「$」エージェントVueの例ではありません$ vm.a VMに相当し、組み込みのプロパティとVueのAPIメソッド。
// 创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend()中的data
var Component = Vue.extend({
data: function() {
return { a: 1 }
}
})プロパティの戻りデータは初期データオブジェクトの関数として宣言する必要があります。
<div id="app">
<h1>my-component</h1>
<my-component></my-component>
<h2>my</h2>
<my-component></my-component>
</div>
<template id="my">
<div>
<div>this is my</div>
<p>this is da</p>
<p>{{message}}</p>
<button @click="message = 'update message'">
修改
</button>
</div>
</template>
<script src="https://unpkg.com/vue"></script>
<script>
var data={
message: 'global'
}
// 全局组件
const my = Vue.component('my-component', {
template: '#my',
// data属性表示当前组件使用的数据信息
// data属性必须是回调函数形式，在回调函数中要返回对象
data: function() {
return data;
}
});
// Vue实例对象
var vm = new Vue({
el: '#app'
});
</script>// 全局组件
const my = Vue.component('my-component',{
template: '#my',
// data属性表示当前组件使用额数据信息
// data属性必须是回调函数形式，在回调函数中要返回对象
// data属性应该返回一个都有的对象
data: function() {
return {
message: 'component-message'
};
}
});データ転送小道具
コンポーネントおよびサブコンポーネント間の通信に使用される親の小道具、データ・コンポーネントのフィールドは、データの親要素を取得するために使用されるサブアセンブリ小道具は、小道具はリテラル構文、文法動的結合剤および等であってもよいです。
小道具リテラル、親コンポーネントサブアセンブリデータは、小道具の声明、サブアセンブリを通じてHTML属性にデータを渡すために使用する親サブアセンブリコンポーネントによって受信されます。
サブコンポーネント：
const my = {
// props:声明接收父组件数据
props: ['message'],
// data一样
template: '<span>{{message}}</span>'
}親コンポーネント：
<my-component message="message from parent by props">
<my-component>const my = {
props: ['myMessage'];
template: '<span>{{message}}</span>'
}
<my-component my-message="hello"></my-component>子组件props指明数据
Vue.component("my-component",{
props: ['message'],
template: '<span>{{message}}</span>'
});
<my-component alt="this is add"></my-component>ダイナミックな構文：
<div id="app">
<my-component v-bind:message="message">
</my-component>
<my-component :message="message">
</my-component>
</div>V-バインドHTMLディレクティブプロパティは親コンポーネントにV-バインド小道具命令動的にバインドデータを使用して、一つの式にバインドされています。
var vm = new Vue({
el: '#app',
data: {
user: {
name: 'test',
age: '12'
}
}
});
<div id="app">
<my-component :user="user"></my-component>
<my-component user="user"></my-comoponent>
</div>修飾子を結合
親コンポーネントの属性の変更は、サブアセンブリに渡されるとき
// 默认单向绑定
<child :message="parentMessage"></child>
// 双向绑定
<child :message.sync="parentMessage"></child>
// 单向绑定
<child :message.once="parentMessage"></child>// 在子组件中修改props都会影响父组件的状态
<div id="example">
<input type="text" v-model="info.name"/>
<child v-bind:msg.once = "info"></child>
</div>
<script src="vue.js"></script>
<script>
// 创建根实例
var vm = new Vue({
el: '#example',
data: function() {
return {
info: {
name: 'hello'
}
}
},
components: {
'child': {
//声明props
props: ['msg'],
template: '<div>{{msg.name}}</div>'
}
}
});
</script>Vue.component('example', {
props: {
propsA: 'null',
// 多种类型
propM: [String, Number],
// 必须是字符串
propB: {
type: String,
required: true
},
propc: {
type:Number,
default: 100
},
propD: {
type: Object,
default: function() {
return {msg: 'hello'}
}
},
// 指定props为双向绑定
propE: {
twoWay: true
},
propF: {
validator: function() {
return value > 10
}
}
});タイプ类型：文字列、数値、ブール値、オブジェクト、関数、アレイ。
タイプは、カスタムコンストラクタすることができます。
強制（）関数を定義するための小道具
Vue.component('example', {
props: {
// 转换函数
propG: {
coerce: function(val) {
return val+''
}
},
propH: {
coerce: function(val){
return JSON.parse(val)
}
}
}
})事件通信
息子イベント通信コンポーネントは、要素の属性のうちのいくつかを有するサブアセンブリ小道具によって親コンポーネントにデータを通過するHTMLで使用される、サブアセンブリは、イベントを介して親コンポーネントにメッセージを送信します。
データは、サブアセンブリ親コンポーネントはサブアセンブリ内のデータプロパティ属性にデータを渡し、小道具を定義する必要があります。
// 父组件向子组件传递数据
<my-component :item="users"></my-component
Vue.component('example',{
template: `<div><button @click="myclick"></button></div>`,
methods: {
myclick: function() {
}
}
});親コンポーネントは、サブアセンブリにデータを渡します
サブアセンブリのコンポーネントの親にメッセージを送信するカスタムVUEイベントメカニズムを使用することができます。
$を使用して、主サブコンポーネントは、親コンポーネントへのトリガ・イベントを発します。
上または命令のV-に$を使用して親コンポーネントはサブアセンブリ、サブアセンブリによってトリガされたイベントに耳を傾け、送信されたメッセージを受信します。
<div id="app">
<my-component @childevent="handleEvent"></my-component>
</div>Vue.component('my-component',{
template: '#my-component',
props: ['value'],
methods: {
emitEvent: function() {
console.log('child component click event');
this.$emit('childevent');
}
}
});Vue.component('my-component',{
template: '#my-component',
props: ['value'],
methods: {
emitEvent: function() {
console.log('child component click event');
this.$emit('childevent');
}
}
});emitEvent: function() {
this.$emit('childevent','附加数据')
}
handleEvent：function(){
console.log(arguments[0]);
}親サブアセンブリコンポーネントにメッセージを送信します。親コンポーネント$上やモニターのサブコンポーネントV-のイベントがトリガされ、メッセージは受信サブアセンブリによって送信されます。
<div id="app">
// 使用组件
<my-component :message="message" @my-component-event="handleMyComponentEvent">
</my-component>
<p>message==={{message}}</p>
</div>
<template id="my">
<div>
<p>{{message}}</p>
<p>
<button @click="handleClick"></button>
</p>
</div>
</template>
<script>
const myComponent={
template: '#my',
props:['message'],
methods:{
handleClick: function(){
this.$emit('my-component-event','updata');
}
}
};
// Vue实例对象
var vm = new Vue({
el: '#app',
data: {
message: 'from parent'
},
// 注册组件
components: {
myComponent
},
// 方法
methods: {
// 接收子组件定义事件处理
handleMyComponentEvent: function(param){
this.message=arguments[0];
}
}
});非イベントの通信の子要素
動的にカスタムイベントを介して親コンポーネントにトリガイベントを修正するための小道具、サブアセンブリによって親コンポーネントサブアセンブリへデータを転送します。
非父と息子のコンポーネント間の通信
サブアセンブリ、またはコンポーネントアセンブリの現在のインスタンスの親オブジェクトに$親$ルート、またはルート・アクセスを使用します。
この。$親の親コンポーネント
これ。$ルートルートコンポーネント
var vm = new Vue({
el: '#app',
data: {
message: 'message'
},
components: {
childComponent
}
});
const childComponent={
template:'',
methods:{
updateRootMessage: function(){
this.$root.message='message from child';
}
}
};アクセス親コンポーネントサブアセンブリは、ref属性を使用して、このことにより、サブアセンブリ参照してください。$参考文献を
<div id="app">
<child-component ref="childComponent">
</child-component>
</div>
var vm = new Vue({
el: '#app',
components: {
childComponent
},
methods: {
updateChild: function(){
this.$refs.childComponent.message="from parent";
}
}
});イベントバスのメカニズム
EMITをトリガ、上の監視購読。途中のことでこれトリガイベントを完了し、コールバック関数でこのメソッドを呼び出している間、このイベントをトリガするためにEMIT法を使用し、イベントをリッスンします。
var dada = new Vue()
// 触发组件a中的事件
dada.$emit('id-selected',1)
// 触发b创建的函数中监听事件
dada.$on('id-selected', function(id){
})イベントバスオブジェクトを作成します。
var dada = new Vue()イベントバスによってトリガイベントに聞きます
dada.$onトリガーのカスタムイベント
dada.$emit
<div id="app">
<child1-component></child1-component>
<child2-component :message="message" ref="child2">
</child2-component>
</div>
<template id="child1">
<div>
<button @click="updateChild2">da</button>
</div>
</template>
<template id="child2">
<div>
message={{message}}
<p>{{name}}</p>
</div>
</template>
<script src="https://unpkg.com/vue">更新2的内容</script>
<script>
const dada = new Vue();
// 创建组件
const child1Component={
template: '#child1',
methods: {
updaeChild2: function(){
// 使用事件总线触发自定义事件
dada.$emit('child1-event','update name from child1');
}
}
};
const child2Component = {
template: '#child2',
props: ['message'],
data: function() {
return {
name: 'child2'
};
},
created: function() {
// 保留当前vue组件对象
const app = this;
// 监听事件总线触发的事件
bus.$on('child1-event', function(param){
console.log('捕获');
app.name = param;
});
}
};
</script>❤️DOは学習あなたの足跡を残すことを忘れないで[コメント+ +のように収集ポイント]
情報を著者：
[著者]：Jeskson
[オリジナル]公開番号：ダダフロントエンドビストロ。
[福祉]：自己学習教材をまくるに送信されませ公共返信「情報」（シェアへのグループには何がハを言いたい、私は見ませんでした）！
[予約]説明：ソースを明記してください、ありがとう再現！〜
大規模なテクノロジ・スタックのブログを配置するフロントエンド開発、フロントエンドの開発、PHPの背景知識、ウェブフルスタック技術分野、データ構造とアルゴリズム、およびそう簡単にネットワーク理論を理解するためには、ジュニアパートナーに提示されます。、あなたがサポートして愛の礼儀をありがとうございました！！！
ローカルコンテンツのこの数はビットを取得しない場合（例：著作権やその他の問題に）、タイムリーにすることができ整流のための私達に連絡し、最初の時間に処理されますしてください。
親指アップしてください！あなたが同意しているので/励ましは、私の文章の最大の力です！
ようこそ注意ダダさんCSDN！
これは、品質、態度のブログです
