Package
Global custom components can be used in any instance
Local custom component can be used in the present example
1. A component which corresponds to only one root tag
2. The assembly of the inside elements in a return value in the form of
<div id="app">
{{ msg }}
<hr>
Components used, equivalent custom labels, name of the component can be customized as a tag
<li-component></li-component>
<demo-component></demo-component>
</div>
Global Components
Vue.component (information 'test-component', {// assembly
data(){
return {
msg : "test"
}
},
methods : {
},
template : `
<div>
<Div> Global </ div>
<P> assembly </ p>
<h1> {{ msg }}</h1>
<li-component></li-component>
</div>
`
})
Vue.component("li-component",{
template : "<li>test - li - 01</i>"
)}
new view ({
el : "#app",
data : {
msg : 'hello world'
},
components : {
‘demo-component' : {
template : `<div>
<h1>这是一个局部的组件</h1>
<test-component></test-component>
<li-component></li-component>
</div>`
}
}
})
组件之间的传值-父传值，子传父，兄弟互传
父传子
<div id="app">
{{ msg }}
<hr>
<h1>父组件</h1>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component('father-component',{
data(){
return {
fValue : ""
}
},
template : `
<div>
<input type="text" v-model="fValue">
<br>
{{ fValue }}
<hr>
<h4>子组件</h4>
<son-component v-bind:toSon="fValue" :abc="123"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component('son-component',{
props : ['toSon',"abc"],
template : `
<div>
接收到的内容为 ： {{ toSon }}
<h1>{{abc}}</h1>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
子传父
<div id="app">
{{ msg }}
<hr>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component('father-component',{
data(){
return {
msg : ""
}
},
methods : {
reMsg : function(data){
console.log('接收子组件传递过来的值为：' + data)
this.msg = data;
}
},
template : `
<div>
<h1>父组件</h1>
{{ msg }}
<hr>
<h4>子组件</h4>
<son-component v-on:toFather="reMsg"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component('son-component',{
data(){
return {
abc : 456
}
},
methods: {
handleClick : function(){
this.$emit('toFather',this.abc)
// this.$emit('toFather',{"name":"jack","age":18})
},
},
template : `
<div>
<button @click="handleClick">发送内容去父组件</button>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
组件之间的传值
<div id="app">
{{ msg }}
<hr>
<father-component></father-component>
</div>
<script>
// 定义一个父组件
Vue.component('father-component',{
data(){
return {
name : "父组件的内容"
}
},
methods : {
checkSon : function(){
console.log(this.$refs);
console.log(this.$refs.mySon.name)
}
},
template : `
<div>
<h1>父组件</h1>
<button @click="checkSon">查看子组件的属性</button>
<hr>
<h4>子组件</h4>
<son-component ref="mySon"></son-component>
</div>
`
})
// 定义一个子组件
Vue.component('son-component',{
data(){
return {
name : "子组件的内容"
}
},
methods: {
checkParent : function(){
console.log(this.$parent.name)
console.log(this.$parent)
}
},
template : `
<div>
<button @click="checkParent">查看父组件的内容</button>
</div>
`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
兄弟组件之间传值
<div id="app">
<xiongda></xiongda>
<hr>
<xionger></xionger>
</div>
<script>
// 兄弟组件之间传值必须依靠外界
// 依靠新的一个vue的实例
var bus = new Vue(); //仅仅只是传值用的
// 定义一个兄弟组件
Vue.component('xiongda',{
template : `
<div>
<h1>熊大</h1>
<button @click="tellXiongEr">通知熊二</button>
</div>
`,
methods : {
tellXiongEr : function(){
bus.$emit('toXiongEr','光头强来了')
}
},
created : function(){
bus.$on('toXiongDa',function(msg){
console.log('熊大收到了消息：' + msg)
})
},
})
// 定义第二个兄弟组件
Vue.component('xionger',{
template : `
<div>
<h1>熊二</h1>
<button @click="replyXiongDa">回复熊一</button>
</div>
`,
created : function(){
bus.$on('toXiongEr',function(msg){
console.log('熊二收到了消息：' + msg)
})
},
methods : {
replyXiongDa : function(){
bus.$emit('toXiongDa','我知道了')
}
}
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>