vue的从0到1搭建 p2

2、父子组件
1)在components目录下新建sub文件夹,用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件

 

 (2)在父组件中引入子组件

    引入:import Confirm from '../sub/Confirm'

    注册:在<script></script>标签内的 name代码块后面加上 components: {Confirm}

    使用:在<template></template>内加上<confirm></confirm>

    完整代码:在First.vue中

<template>
    <div class="first-app">
        {{msg}}
        <confirm></confirm>
    </div>
</template>

<script>
import Confirm from '../sub/Confirm.vue'
export default {
  name: 'First',
  components: { Confirm },
  data () {
    return {
      msg: 'welcome to my first test'
    }
  }
}
</script>

<style>

</style>

 

 ps:在div中输入confirm,在import的时候自动补全就生成了,但是格式会乱,可能会自动出现{}错乱的问题,调整一下检查一下就好了;

 3)父子组件通信

    子组件:

 

   父组件:

<template>
    <div class="first-app">
        {{msg}}
        <confirm :text="注册" @message="getMessage"></confirm>
    </div>
</template>

<script>
import Confirm from '../sub/Confirm.vue'
export default {
  name: 'First',
  components: { Confirm },
  data () {
    return {
      msg: 'welcome to my first test'
    }
  },
  methods: {
    getMessage (val) {
      alert(val)
    }

  }
}
</script>

<style>

</style>

 


 

 效果图:

 

 ps:当你run起来项目之后,注意地址信息,如果渲染不出来,可能是因为地址没有定位到准确的页面捏~

 

 3、使用路由搭建简单页面

  1、在views下创建一个second.vue文件
  2、写

        <p><router-link to="/second">to second page</router-link></p>

 

 

运行效果:

 

 点击后:

posted @ 2023-03-20 16:14  Tityaaaa  阅读(26)  评论(0编辑  收藏  举报