Vue defined components
What are the components: the emergence of assembly, is to split the amount of code Vue instance, allow us to different components, divided into different functional modules to the future what kind of functions we need, you can go call the corresponding components;
Different components and modular:
- Modular: the code is divided from a logical perspective; a single layered facilitate development code, to ensure that the functions of each functional module;
- Components of: angle is divided from the UI interface; front-end components for easy reuse UI components;
Three ways globally defined components
<!-- 引用方式 -->
<my-com></my-com>- Use Vue.extend with Vue.component method
// 定义
var com = Vue.extend({
template: '<h3>创建了一个H3</h3>' // 通过 template 属性 指定了组件要展示的属性
});
// 使用 Vue.component ('组件的名称', 创建出来的组件模板对象) 如果组件名是驼峰命名引用时需要加 -
Vue.component('myCom', com)
Vue.component('myCom', Vue.extend({ // 缩写
template: '<h3>创建了一个H3</h3>'
}));- Direct method using Vue.component
Vue.component('myCom', {
template: '<div><h1>直接使用 component 创建的全局组件</h1><span>123</span></div>'
});- Using the template tag provided in conjunction with the Vue method Vue.component
<!-- 在Vue实例控制的区域之外定义 -->
<template id="temp">
<h1>使用 template 标签, 之后再去 Vue实例中去引用 </h1>
</template>Vue.component('myCom', {
template: '#temp'
});Note: components DOM structure, and only has a unique root element (Root Element) to wrap
Define private Components
var vm = new Vue({
el: '#app',
components: {
myCom: {
template: '可以使用模板, 也可以只写表标签,规则与上述一致'
}
}
});Assembly data and methods
data
// 组件中可以有自己的 data 但是必须是一个方法, 还要 return 一个对象
Vue.component('myCom', {
template: '<h1>调用方式和 Vue 实例一致: {{ msg }}</h1>',
data: function () {
return {
msg: '组件中的data'
}
}
});methods
Vue.component('myCom', {
template: '<div><intpu type="button" value="+1" @click(increment)><h1>{{ msg }}</h1></div>',
data: function () {
return {msg : 0};
},
methods: {
increment () {
this.msg += 1;
}
}
});Switching assembly in two ways
Flag used in combination identifier v-if v-else instruction switch assembly
<!-- 页面 -->
<div id="app">
<a href="" @click="flag=true"></a>
<a href="" @click="flag=false"></a>
<login v-if="flag"></login>
<register v-else="flag"><register>
</div>// Vue 实例 此方法对于数量有一定缺陷
Vue.component('login', {
template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
el: '#app',
data: { flag = true }
});Use component tag, to refer to a component by: the specified component attribute is to be loaded
<!-- 页面 -->
<div id="app">
<a href="" @click.prevent="comName='login'"></a>
<a href="" @click.prevent="comName='register'"></a>
<!-- component 是一个占位符, :is 属性,可以用来指定要展示组件的名称 -->
<component :is="comName"></component>
</div>Vue.component('login', {
template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
el: '#app',
data: { comName: 'login' }
});Components transition animation
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
transition: all 0.4s ease;
}<!-- 只是需要 transition 把 组件包裹起来就可以了 通过mode设置动画模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>Parent component subassembly to pass values
<div id="app">
<!-- 1: 先通过 v-bind: 绑定自定义属性 然后指定值 -->
<son v-bind:parentmsg="msg"></son>
</div>var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件的内容'
},
components:
son: {
// 3: 通过 {{ parentmsg }} 的方式调用父组件中的值
template: '这是子组件的内容 -- {{ parentmsg }}',
},
// 注意: props 是只读的, 虽然可以修改, 但是会报错
props: ['parentmsg'], // 2: 再通过 props 定义父组件传过来的值
});Value transmitted to the parent sub-assembly components
- Principle: The parent component of the reference method, the method passed to the internal sub-assemblies, subassemblies, call the parent component inside pass over, while the data to be sent to the parent component, as the last parameter passed when calling the method;
- Parent component references passed to the method sub-components, which, getMsg is the method name defined in the assembly methods, func method is invoked sub-assemblies passed over when the name of the method
<son @func="getMsg"></son> - By interior subassembly
this.$emit('方法名', 要传递的数据)way to invoke a method of assembly, while the data is transmitted to the parent component used
<div id="app">
<son @func="getMsg"></son>
</div>
<template id="tmp">
<input type="button" value="点击传递" @click="give">
</template>var vm = new Vue({
el: '#app',
data: { fromChild: null },
methods: {
getMsg(param) {
this.fromChild = param;
}
},
components: {
son: {
template: '#tmpl',
methods: {
myclick() {
this.$emit('func', this.child);
}
},
data() {
return {
child: { name: 'son'}
};
},
}
}
});Use this. $ Refs get elements and components
<div id="app">
<input type="button" value="获取元素内容" @click="getElement" />
<!-- 使用 ref 获取元素 -->
<h1 ref="myh1"> 这是一个 h1 </h1>
<hr />
<!-- 使用 ref 获取子组件 -->
<my-com ref="mycom"></my-com>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return { name: '子组件' }
},
methods: {
show() {
console.log('这是子组件的show方法');
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件 data 以及 methods
console.log(this.$refs.mycom);
console.log(this.$refs.mycom.name);
console.log(this.$refs.mycom.show());
}
}
});
</script>