26. VUE组件开发分离写法

VUE开发组件的时候 很不方便，现在我们吧 tempate 中的代码 和 声明、注册、绑定 分离开写：

有两种方法分离，先说第一种：

 

第一种是直接  用script标签，然后他的type属性一定要是 "text/x-template",然后可以注册个id，直接在template中调用即可：

<script type="text/x-template" id="bihu">
    <div>
      <h2>分离写法</h2>
      <p>都是愚蠢的自己。</p>
    </div>
</script>

<div id="app">
<m-cpn></m-cpn>
</div>

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

<script>

    //注册一个全局组件
    Vue.component('m-cpn',{
      template:'#bihu'
    })

    const app = new Vue({
      el:"#app"
    })
    
</script>

 我尝试过用 class 来寻找，但是失败了，所以只能是id哦，这个方法就这样 ，其他那些父组件子组件都通用（要回去复习一下哦）

 

 

第二种方法： 
　　直接用 template 这个标签中写代码，然后配个ID  ，然后也是在template中直接调用：

  <template id="bihu">
      <div>
        <h2>分离写法</h2>
        <p>你懂我的期待。</p>
      </div>
  </template>

  <div id="app">
  <m-cpn></m-cpn>
  </div>

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

  <script>

      //注册一个全局组件
      Vue.component('m-cpn',{
        template:'#bihu'
      })

      const app = new Vue({
        el:"#app"
      })

  </script>

 

其实就是 script 标签 换 template 标签。 第二种比较方便。

 

局部绑定：

 

  <script>
      const app = new Vue({
        el:"#app",
        components:{
          'm-cpn':{
            template:'#xxid'
          }
        }
      })

  </script>