vue组件的几种书写方式

vue组件实现Tab切换功能


<html>
<head>
    <meta charset="utf-8"/>
    <title>Demotitle>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js">script>
head>
<body>

    <div id="app">
        <div :is="tabShow">div>
        <button @click="tab('A')">tab1button>
        <button @click="tab('B')">tab2button>
        <button @click="tab('C')">tab3button>
        <button @click="tab('D')">tab4button>
    div>
      
    <script>

      A = {
        template:`我是第一一一个tab
`
      }
      B = {
        template:`我是第二二二个tab
`
      }
      C = {
        template:`我是第三三三个tab
`
      }
      D = {
        template:`我是第四四四个tab
`
      }

      new Vue({
        el:'#app',
        data(){
          return {
            tabShow:'A'
          }
        },
        components:{
            'A': A,
            'B': B,
            'C': C,
            'D': D
        },
        methods:{
            tab(currentShowTab){
                this.tabShow = currentShowTab;
            }
        }

      })

    script>
body>
html>

两个组件方式，还有一种是 .vue 为后缀的文件组件,需要模块化才能用


<html>
<head>
    <meta charset="utf-8"/>
    <title>Demotitle>
    <script src="https://unpkg.com/vue">script>
head>
<body>
    <div id="app">

      
      <hello>hello>
      <hr>
      
      <world>world> 
      
    div>
      
    <script>

      //注意：组件要写在实例之前，不然就会报错
      Vue.component('hello',{
        template:`我是一个全局话组件
`
      });

      //局部组价 需要用components 去注册
      world = {
        template:`我是一个局部组件
`
      }
      //实例
      new Vue({
        el:'#app',
        data(){
          return {}
        },
        //components 注册world组件
        components:{
          'world': world
        }
      })
    script>
body>
html>

单项数据流，父组件向子组件传参数，用props接受


<html>
<head>
    <meta charset="utf-8"/>
    <title>Demotitle>
    <script src="https://unpkg.com/vue">script>
head>
<body>

    <div id="app">

      

      <world :here="message">world> 

    div>
      
    <script>

      world = {
        // props接收父组件传过来的here
        props:['here'],
        template:` {{here}} 
`
      }

      new Vue({
        el:'#app',
        data(){
          return {
            message:'不让任何事情成为你不去学习的理由--李华明'
          }
        },
        components:{
          'world': world
        }
      })

    script>
body>
html>

嵌套的组件使用方式


<html>
<head>
    <meta charset="utf-8"/>
    <title>Demotitle>
    <script src="https://unpkg.com/vue">script>
head>
<body>

    <div id="app">
      <world>world> 
    div>
  
    <script>
      // 嵌套的子组件必须卸载父组件之上
      city = {
        template: `我是子组件的子组件
`
      }
      //嵌套的组件
      world = {
        template:`
            
                我是子组件
                
            
`,
        components:{
            'city': city
        }
      }
      new Vue({
        el:'#app',
        data(){
          return {
            message:'不让任何事情成为你不去学习的理由--李华明'
          }
        },
        components:{
          'world': world
        }
      })
    script>
body>
html>

vue组件的几种书写方式

我是第一一一个tab

我是第二二二个tab

我是第三三三个tab

我是第四四四个tab

我是一个全局话组件

我是一个局部组件

{{here}}

我是子组件

你可能感兴趣的:(vue)