VUE单文件组件之间调用

现有2个vue单文件组件，Vif.vue和Vbind.vue，要在Vif.vue中调用Vbind.vue。

Vif.vue代码如下：

 

 

<template>

<divid="app-3">

<pv-if="seen">现在你看到我了</p>

<vbind></vbind>

</div>

</template>

 

<<script>

import vbind from './Vbind.vue'

 

export default {

name: 'app-3',

beforeCreated () {

console.log('beforeCreated called')

},

created () {

console.log('created called')

},

data () {

return {

seen: true

}

},

components: {vbind}

}

</script>

 

 

 

 

 

Vbind.vue代码如下：

 

 

<template>

<divid="app-2">

<spanv-bind:title="message">

鼠标悬停几秒钟查看此处动态绑定的提示信息！

</span>

</div>

</template>

 

<script>

export default {

name: 'app-2',

data () {

return {

message: '页面加载于 ' + new Date().toLocaleString()

}

}

}

</script>

 

 

 

 

 

运行后页面如下