组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<Father>
<!-- <Son></Son> -->
</Father>
</div>
<template id="father">
<!-- 唯一根元素 -->
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是子组件 </h3>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
组件的嵌套:
1. 子组件以标签的形式要在父组件的模板中使用
*/
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son'
})
new Vue({
el: '#app'
})
</script>
</html>
组件的局部嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<Father>
<!-- <Son></Son> -->
</Father>
</div>
<template id="father">
<!-- 唯一根元素 -->
<div>
<h3> 这里是父组件 </h3>
<hr>
<Son></Son>
</div>
</template>
<template id="son">
<div>
<h3> 这里是子组件 </h3>
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
组件的嵌套:
1. 子组件以标签的形式要在父组件的模板中使用
*/
new Vue({
el: '#app',
components: {
'Father': {
template: '#father',
components: {
'Son': {
template: '#son'
}
}
}
}
})
</script>
</html>
组件中的数据
1. 为什么组件中的data选项是一个函数,而根实例中是对象 【 面试题 - 星耀 】
原因:
1. 组件是一个独立的整体,那么数据也应该是一个独立的 【 80% 】
2. 多人开发,数据如果不是独立的,那么数据会冲突 【 5% 】
3. javascript最大的特点: 函数式编程,而函数本身就有一个独立作用域 【 15% 】
2. 为什么组件中的data函数要有返回值,并且返回值是一个对象,不能是其他的吗?
原因:
1. 因为data选项要经过es5 Object.defineProperty 属性进行getter和setter设置
3. 数据中数据的使用
组件的数据,使用范围只能在组件的模板中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<Hello></Hello>
{{ msg }}//失效
</div>
<template id="hello">
<div>
{{ msg }}
</div>
</template>
</body>
<script src="../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: '今天热的要死' // 组件的数据,使用范围只能在组件的模板中
}
}
})
new Vue({
el: '#app'
})
</script>
</html>