test16.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VueJS2 利用组件的过渡变量解决遗留问题_Components组件-vuejs实战教程[云海天教程]</title>
    <meta name="keywords" content="Vue.js 教程,vue教程,新手入门教程,vue实例教程,vue基础教程,vue教程案例实战项目,最全vue项目实战">
    <meta name="description" content="VueJS2 利用组件的过渡变量解决遗留问题">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
	</head>
	<body>
   <div id="app" class="container">
         <p></p>

    <!-- 组件的过渡变量解决遗留问题开始 -->
         <h3>{{ topic }}</h3>
         <!-- 父组件给子组件传值必须要加v-bind:    不然会当成字符串处理 -->
           <voter v-bind:count='count'></voter>

          <!-- 组件的过渡变量解决遗留问题结束 -->
       </div>
       <!-- 第一步引入 -->
       <!-- 开发环境版本，包含了有帮助的命令行警告 -->
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

       <!-- 第二步定义注册组件 -->
       <script type="text/javascript">


         //局部组件开始
         let Voter = {
           template : `
             <button @click='counter++' class ='btn btn-success'>局部投票系统 {{ counter }}</button>
           `,
          props:[
             'count'
          ],
          //过渡中间值
          data(){
            return {
              counter :0
            }
          },
          //赋值
          mounted(){
            this.counter = this.count
          }
         };

         //局部组件结束

         let app = new Vue({
           el : '#app',
           data : {
             topic : '局部组件',
             count : 5
           },
           //局部组件挂靠
           components:{
             'voter' : Voter,
           }
         });

       </script>

   <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
   	</body>
   </html>