<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<gcpn></gcpn>
<partcpn></partcpn>
<xtemplatecpn></xtemplatecpn>
<tempcpn :sonfruit="fruit" @itemclick="fathermethod"></tempcpn>
<input type="text" placeholder="点击上面父子传到父类控件过来吧" id="faText" style="width:500px"/>
</div>
<!-- 这种要放在vue对象前面 这里也要用 div扩起来，不然有多个子控件会报错-->
<!-- 如果是下面这样会报错 -->
<!-- <div><span>我是x-template子组件</span></div>
<ol>
<li v-for="item in person">{{item}}</li>
</ol> -->
<script type="text/x-template" id="xtemp">
<div><span>我是x-template子组件</span>
<ol>
<li v-for="item in person">{{item}}</li>
</ol>
</div>
</script>
<template id="temp">
<div>
<span>我是 template子组件 帅吧，父传子，子传父</span>
<ol>
<li v-for="fruit in sonfruit" @click="childrenclick(fruit)">{{fruit}}</li>
</ol>
</div>
</template>
<script>
var gcpn= Vue.extend({ template: `<div><span>我是全局子组件</span></div>` });
//这里是定义全局组件
Vue.component("gcpn",gcpn);
new Vue({
el:"#app",
data:{
fruit:["apple","banana","peach","watermelon","orange"]
},
methods:{
fathermethod:function(item){
var text=document.getElementById("faText");
text.value= text.value+" "+item ;
}
},
components:{
"partcpn":{ template:`<div><span>我是局部子组件</span></div>`},
"xtemplatecpn":{
template:"#xtemp",
//子类的data和父类有些不同，需要是一个函数 。
data(){
return {person:["man","woman","girl","boy"]}
}
},
"tempcpn":{
template:"#temp",
//定义子类属性，接收传值
props:{ sonfruit:[]}
,
methods:
{
childrenclick:function( item)
{
//绑定父类方法的事件
this.$emit("itemclick",item);
}
}
}
}
})
</script>
</body>
</html>
评论0