5.1 组件创建方式
5.2 全局组件&局部组件
5.3 组件语法糖
5.3.1 全局组件语法糖
<div id="app">
<ta></ta>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
//语法糖：省略Vue.extend()
Vue.component("ta",{
template:'<div>这是一个VUE的组件<p>组件是个很神奇的东西!</p></div>',
});
const app = new Vue({
el:"#app",
// components:{
// "ta":template_a
// },
data:{
}
});
</script>
5.3.2 局部组件语法糖
<div id="app">
<ta></ta>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
components:{
"ta":{
template:'<div>这是一个VUE的组件<p>组件是个很神奇的东西!</p></div>',
}
}
});
</script>
5.4 模板的分离写法
写法一：script
<div id="app">
<ta></ta>
<ta></ta>
<ta></ta>
</div>
<script type="text/x-template" id="mytemplate">
<div>
这是一个VUE的组件
<p>组件是个很神奇的东西!</p>
<p>组件的学习非常关键！</p>
</div>
</script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
components:{"ta":{
template:"#mytemplate"
}}
});
</script>
写法二：template
<div id="app">
<ta></ta>
<ta></ta>
<ta></ta>
</div>
<template id="mytemplate">
<div>
这是一个VUE的组件
<p>组件是个很神奇的东西!</p>
<p>组件的学习非常关键！</p>
</div>
</template>
<script type="text/javascript">
const app = new Vue({
el:"#app",
components:{"ta":{
template:"#mytemplate"
}}
});
</script>
5.5 组件的父子通讯
5.5.1 父组件传值给子组件
<div id="app">
<child :childbooks="books" :cmessage="message"></child>
</div>
<template id="childComp">
<div>
<p>{{cmessage}}</p>
<ul>
<li v-for="item in childbooks">{{item}}</li>
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
books:["java","c++","python"],
message:"hello world!"
},
components:{
"child":{ //组件注册
template:'#childComp',
props:['childbooks',"cmessage"], //使用props来注册往组件中传递的值
data(){return {};}
}
}
});
</script>
效果：
5.5.2 父子通讯变量驼峰原则
使用VUE脚手架时不存在该问题！
<div id="app">
<!-- 在做变量绑定的时候使用的是childBooks时需要使用驼峰原则 child-books -->
<child :child-books="books" :c-message="message"></child>
</div>
<template id="childComp">
<div>
<p>{{cMessage}}</p>
<ul>
<li v-for="item in childBooks">{{item}}</li>
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
books:["java","c++","python"],
message:"hello world!"
},
components:{
"child":{
template:'#childComp',
props:['childBooks',"cMessage"],
// data(){return {};}
}
}
});
</script>
5.5.3 传值的类型限制
类型验证支持的类型：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- 自定义类型
<div id="app">
<!-- :c-message="message" -->
<!-- 标签未绑定值时才启用默认值 -->
<child :child-books="books"></child>
</div>
<template id="childComp">
<div>
<p>{{cMessage}}</p>
<ul>
<li v-for="item in childBooks">{{item}}</li>
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
books:["java","c++","python"],
// message:"hello world!"
},
components:{
"child":{
template:'#childComp',
props:
{"childBooks":{
type:Array,
required:true,
/*
*如果指定required，但是没有传值；会报如下错误：
vue.js:634 [Vue warn]: Missing required prop: "cMessage"
found in
---> <Child>
<Root>
*/
default(){
}
},"cMessage":{
type:String,default:'这是一个默认你消息！'
}}
// props:['childBooks',"cMessage"],
// data(){return {};}
}
}
});
</script>
5.5.4 父子组件传值的三种方式
- 使用数组进行简单传值
- 类型限制
- 提供默认值
5.6 组件的子父传值
实例
<div id="app">
<child :c-message="message" @childitemclick="childclick"></child>
</div>
<template id="childComp">
<div>
<p>{{cMessage}}</p>
<ul>
<li @click="bookclick(item)" v-for="item in mybooks">{{item.id}} - {{item.name}}</li>
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
methods:{
childclick(item){
console.log("--p--");
console.log(item);
}
},data:{
message:"hello world!"
},
components:{
"child":{
template:'#childComp',
methods:{
bookclick(item){
this.$emit('childitemclick',item);
}
},
data(){
return {
mybooks:[
{id:1,name:'Java从入门到放弃'},
{id:2,name:'Python从入门到放弃'},
{id:3,name:'ObjectC从入门到放弃'},
{id:4,name:'C++从入门到放弃'}
]
};
},
props:
{"cMessage":{
type:String,required:true,default:'这是一个默认你消息！'
}}
}
}
});
</script>
本文由 huzd 创作，采用 知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间
为:
2021/12/20 19:45