vue学习一

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

如图

新建了如图 

这两个如何关联呢

testA.vue内容

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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