zoukankan      html  css  js  c++  java
  • Vue创建局部组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>

    <div id="app">
    <!-- //使用组件 -->
    <handsome></handsome>
    <component2></component2>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>

    // 局部组件 使用的三部曲:1、创建这个组件 2、注册这个组件 3、引用这个组件
    //组件是相互独立的 不能直接跨作用域 实例也是一个组件 实例拥有生命周期函数 所以组件也拥有生命周期函数
     
    let obj={school:'zfpx'};//组件共用数据的情况
     
    //注意:如果组件共用了数据 会导致同时更新(不符合独立性)
    //子组件不能直接使用父组件的数据(组件间的数据交互)

    //组件理论上可以无限嵌套


    //创建组件
    let handsome={
    // 自己的模板可以用自己的data
    template:'<div>哈哈哈哈哈哈哈{{school}}</div>',
    data(){
      return obj
    }
    }

    let component2={
    // 这里的引号问题可以用es6的模板字符串用``来包裹
    // 点击自定义的标签 school的值变成hello

    // 但是我们发现 由于obj这个数据是共享的 所以改变了一个的同时 下一个也会改变
    // 这就不符合组件独立性的性质了
    template:`<div @click="fn">组件2{{school}}</div>`,
    data(){ //!!!!!注意这里的data要是函数 这里为什么data要是函数的原因 因为函数在
      return obj //调用的时候可以返回对象 由于返回的对象的地址不同 所以可以让组件独立
    },
    methods:{
    fn(){
    this.school='hello'
    }
    }
    }

    let vm=new Vue({
    el:'#app',
    components:{//注册这个组件
    handsome:handsome,//在es6中名字一样可以写一个,
    component2
    },
    data:{
    a:1
    }
    })



    </script>
    </body>
    </html>
  • 相关阅读:
    Quicksum -SilverN
    uva 140 bandwidth (好题) ——yhx
    uva 129 krypton factors ——yhx
    uva 524 prime ring problem——yhx
    uva 10976 fractions again(水题)——yhx
    uva 11059 maximum product(水题)——yhx
    uva 725 division(水题)——yhx
    uva 11853 paintball(好题)——yhx
    uva 1599 ideal path(好题)——yhx
    uva 1572 self-assembly ——yhx
  • 原文地址:https://www.cnblogs.com/cmy1996/p/9108765.html
Copyright © 2011-2022 走看看