1、组件
<!DOCTYPE html>
<html>
<head>
<title>组件</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component1></my-component1>
</div>
<div id="app1">
<my-component></my-component>
<jubuzujian></jubuzujian>
<jubuzujian2></jubuzujian2>
</div>
<!-- 可以把组件中的template的字符串写在这里，叫做模板字符串，如果字符串比较庞大，则可以使用这样的方式定义template -->
<script type="text/x-Template" id="tpl1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 注册全局组件，任何一个vue实例都可以使用，作用域是全局
Vue.component("my-component",{
template:'<div>{{mes}}<input type="button" value="tanchu" v-on:click="tanchu"></div>',
data:function(){
return {
mes:"hello component"
}
},
methods:{
tanchu:function(){
alert(123)
}
}
})
// 初始化根实例
var app = new Vue({
el:"#app",
data:{
},
// 局部注册组件的第一种方法
components:{
"my-component1":{
template:'<div>{{mes}}<input type="button" value="jubuzujian" v-on:click="tanchu1"></div>',
data:function(){
return {
mes:"hello jubuzujian"
}
},
methods:{
tanchu1:function(){
alert(123)
}
}
}
}
})
// 局部注册组件的第二种方法
var zujian = {
template:'<div>{{mes}}<input type="button" value="oooo" v-on:click="tanchu1"></div>',
// data必须是一个函数
data:function(){
return {
mes:"hello jubuzujian"
}
},
methods:{
tanchu1:function(){
alert(123)
}
}
}
var zujiantpl = {
// 这里使用dom的选择器选择就可以了
template:'#tpl1',
data:function(){
return {
mes:"hello jubuzujian"
}
},
methods:{
tanchu1:function(){
alert(123)
}
}
}
var app1 = new Vue({
el:"#app1",
data:{
},
components:{
"jubuzujian":zujian,
"jubuzujian2":zujiantpl
}
})
</script>
</body>
</html>
2、组件之间的通信
<!DOCTYPE html>
<html>
<head>
<title>组件通信</title>
</head>
<body>
<div id="app">
<!-- 静态传参 -->
<my-new-tpl1 mes="hello vue1"></my-new-tpl1>
<!-- 动态传参 -->
<my-new-tpl1 v-bind:mes="mes"></my-new-tpl1>
<my-new-tpl1 mes="hello vue3" v-on:jieshou="jieshoufunc"></my-new-tpl1>
</div>
<script type="text/x-Template" id="id1">
<input type="button" value="tanchu" v-on:click="tanchu1">
</script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var mytpl = {
template:'#id1',
// 接受一个静态属性
props:["mes"],
// data必须是一个函数
data:function(){
return {
mes:"hello jubuzujian"
}
},
methods:{
tanchu1:function(){
alert(this.mes);
this.$emit("jieshou")
}
}
}
var app = new Vue({
el:"#app",
data:{
mes:"zhen TM nan"
},
components:{
"my-new-tpl1":mytpl
},
methods:{
jieshoufunc:function(){
alert("123.....")
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号