Chapter 9 Component
https://cn.vuejs.org/v2/guide/components.html
https://cn.vuejs.org/v2/guide/components-registration.html
9.1 Identifying Components
Components of the system Vue is an important concept, because it is an abstraction, allows us to use small, independent and reusable components typically build large applications. An application usually will be in the form of a nested assembly organized tree:
For example, you may have a component header, sidebar, content area and so on, each component also contains other like navigation links, Bowen components and the like.
9.2 Basic Usage
Examples Vue component is reusable, and has a name. This component is used as a custom element. Benefit component is to write one can be any number of multiplexing.
<div id="app">
<!-- 使用组件 -->
<!-- 将组件名直接当做标签名在html代码中使用即可 -->
<mytemp></mytemp>
<!-- 组件可以进行任意次数的复用 -->
<mytemp></mytemp>
</div>
<script>
// 定义一个名为 mytemp 的新组件
Vue.component('mytemp',{
// template属性的值，作为组件的内容
// vue 会把这个值替换到html中并会被浏览器渲染
template:"<h2>我是一个组件</h2>"
})
var app = new Vue({
el: '#app',
})
</script>
We directly use the above code Vue.component()method defined component, and this mytempcomponent can be used in all instances vue,
Such an assembly is called global components
In particular a vue example, may be defined components, the components will work only in a particular vue example, such an assembly is called a local (private) component
<div id="app">
<!-- 使用组件 -->
<!-- 将组件名直接当做标签名在html代码中使用即可 -->
<mytemp></mytemp>
</div>
<div id="app2">
<!-- 不可用 -->
<mytemp></mytemp>
</div>
<script>
var app = new Vue({
el: '#app',
// app 的私有组件，其他实例对象不可用
components: {
mytemp: {
template: "<h2>我是一个组件</h2>",
}
}
})
var app2 = new Vue({
el: '#app2',
})
</script>
9.3 Note
If the component name is named hump law, to use uppercase letters to lowercase components and preface -
tamplate properties of a component must have a unique root element, otherwise it will error
<div id="app">
<!-- 使用组件 -->
<!-- 将组件名直接当做标签名在html代码中使用即可 -->
<my-temp></my-temp>
<!-- 单标签方式使用 -->
<my-temp/>
</div>
<div id="app2">
<!-- 不可用 -->
<mytemp></mytemp>
</div>
<script>
var app = new Vue({
el: '#app',
// app 的私有组件，其他实例对象不可用
components: {
// 驼峰法命名
myTemp: {
// 必须有唯一的根标签，多标签报错
template: "<div><h2>我是一个组件</h2><h3>df</h3></div>",
}
}
})
var app2 = new Vue({
el: '#app2',
})
</script>
9.4 Use of components
CSS code
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 80px;
background-color: #ccc;
}
.left {
margin-top: 20px;
width: 800px;
height: 600px;
background-color: #ccc;
float: left;
}
.right {
margin-top: 20px;
width: 400px;
height: 600px;
background-color: #ccc;
float: right;
}
Raw HTML code
<div id="app">
<div class="top">我是顶</div>
<div class="left">我是左</div>
<div class="right">我是右</div>
</div>
Component code
<div id="app">
<tops></tops>
<lefts></lefts>
<rights></rights>
</div>
<script>
var app = new Vue({
el: '#app',
components:{
tops:{
template:'<div class="top">我是顶</div>'
},
lefts:{
template:'<div class="left">我是左</div>',
},
rights:{
template:'<div class="right">我是右</div>'
}
}
})
</script>
Data and methods 9.5 assembly
Is the name of the component with the reusable Vue example , and so they are new Vueinstances of an object receive the same parameter options data, computed, watch, methods, but elexceptions;
While the components and instance objects can receive the same parameter options, but in the specific use, vue instance of an object dataand components dataare still differences in our own components written in,data 必须是一个函数
A data option must be a function component , each instance of an object can maintain a copy to be returned;
<div id="app">
<my-temp></my-temp>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
myTemp: {
// 一个组件的 data 选项必须是一个函数
data:function(){
// 将 数据 装入 对象 返回
return {msg:'我是data选项'}
},
// 其他选项的使用不受影响
methods:{
cli(){
alert(123);
}
},
template: "<div @click='cli'>{{msg}}</div>",
}
}
})
</script>
In addition datato the options, other options are the same;
Examples of the component is 9.6 vue
By new Vue()obtained an instance object, in fact, this is a special instance of an object component, but also templatethe parameters, may be used as a component;
<div id="app">
{{msg}}
</div>
<script>
var app = new Vue({
el: '#app',
data:{msg:'数据'},
template:'<h2>组件</h2>'
})
</script>
The above code directly into Vue instance object as a templateparameter, then vue will be used templateto replace the data in elthe selected entire DOM nodes, datadata options are not binding because the binding data before the entire DOM node including node {{msg}}will be replaced; if you want to bind the data correctly, we can add the template data{{msg}}
<div id="app">
{{msg}}
</div>
<script>
var app = new Vue({
el: '#app',
data:{msg:'数据'},
template:'<h2>组件{{msg}}</h2>'
})
</script>
9.7 transmitting data to the sub-assembly by Prop *
https://cn.vuejs.org/v2/guide/components.html
<div id="app">
<mytemp></mytemp>
</div>
<script>
var app = new Vue({
el: '#app',
data:{msg:'数据'},
components:{
mytemp:{
template:'<h2>data:{{msg}}</h2>'
}
}
})
</script>
Run the above code, we find that the component mytempdoes not get instance datadata, which is due to have their own separate scopes between components and assemblies;
vue assembly provided in the propsoption, props accepts a custom property value in the component;
<div id="app">
<mytemp cc="我是cc"></mytemp>
</div>
<script>
var app = new Vue({
el: '#app',
data:{msg:'数据'},
components:{
mytemp:{
template:'<h2>data:{{cc}}</h2>',
props:['cc'],
}
}
})
</script>
We know that after the use of props, how can the data vue instance of an object in the incoming assembly it? We can make use of v-bindthe instruction to pass by value;
<div id="app">
<mytemp v-bind:cc="msg" v-bind:kk="msg2"></mytemp>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
msg:'数据',
msg2:'数据二'
},
components:{
mytemp:{
template:'<h2>data:{{cc}}<br>{{kk}}</h2>',
props:['cc','kk'],
}
}
})
</script>
vue instance of an object is a component, but mytempthe component is to run in the following instance of an object, then we will also instances of objects called the parent component , the mytempcomponent is called sub-components ; and our above code, in fact, been achieved parent component transmitting data to the sub-assembly function;
