自己根据网上的教程新建了一个vue_tes项目。想自己在里面修改，添加各种内容。新建了几个vue页面，一直想把他们关联起来展示。非常心急，没有仔细去看文档，而且网上的教程都是单页面的。很好理解。自己创建的就有了那么一套框架了。要怎么做了？

如图

新建了如图

这两个如何关联呢

testA.vue内容

<template>

  <div class="hello">

    <h1>{{ msg9 }}</h1>

  </div>

</template>

<script>

export default {

    name:'testa',

    data(){

        return{

            msg9:'ttt88888'

        }

    }

}

</script>

　test.vue

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <testAVue></testAVue>//调用

  </div>

</template>

<script>

import testAVue from './testA.vue';//这里是引用

export default {
    //注册

     components: {

      testAVue

     },

    data(){

        return{

            msg:'test7777'

        }

    }

}

</script>

运行结果如图，已经关联了，可以玩了！

三个点...

延伸学习：https://www.cnblogs.com/websmile/p/8328138.html

在子组件中定义
props:['message','name','age'],
在父组件中使用和传值
<testa :message="msg" :name="name9" :age="age9" ></testa>
//这是父组件
import testa from '@/views/Test'
export default {
components:{
testa
},
name: 'HelloWorld',
data () {
return {
msg: 'Welcome',
age9:18,
name9:'张三'
}
}

vue v-slot 小结

https://www.jianshu.com/p/7020636d68a5

巴特西

vue学习一

vue v-slot 小结

最新文章

热门文章