vue 组件

组件

组件的注册

全局注册
局部注册
局部注册与全局注册案例

<body>
        <div id='a1'>
            <bcdt></bcdt>

        </div>
        <div id='a2'>
                <bcdt></bcdt>
    
            </div>
            <script type="text/x-template" id="s1">
                <div>{{mas2}}<input type="button" value="弹出" @click="huan1"/></div>
            </script>
        <script>
        Vue.component('bcdt',{
            template:'<div>{{mas2}}<input type="button" value="弹出" @click="huan1"/></div>',
            data:function(){
              return { mas2:'cna1cbaocoa'} 
            },
            methods:{
                huan1:function(){

                    alert(2)
                }
  

            }
        }
        

        )
         var vm= new Vue({
        el:"#a1",

        })
       
        var zujian ={
            template:'#s1',
            data:function(){
              return { mas2:'cna1cbaocoa'} 
            },
            methods:{
                huan1:function(){

                    alert(1)
                }
  

            }
        }
        var vm2= new Vue({
        el:"#a2",
        components:{
            'bcdt':zujian,
        }

        })


</script>

其中<script type="text/x-template"><script>是引用模板
data在component必须应用函数

格式为data：function(){

return {};

}

slot分发内容

*slot命名引用
作用域插槽

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

vue 组件

组件

父子通讯用.props来传递

子夫传递用.emit

非父子传递

slot分发内容

黄黄黄

引用和评论

防抖动与节流

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号