vue学习一

自己根据网上的教程新建了一个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