Vue 组件化、父子通信[props, $emit(), $children, $refs, $parent]

组件化：

　　 任何应用都会被抽象成一种树结构

主见使用三步骤

1.创建组件构造器  调用Vue.extend()创建组件构造器

2.注册组件　　调用Vue.component('a','b')方法注册组件 :一个参数a-注册组件的标签名；另一个参数b-组件构造器名称

3.使用组件　　在Vue实例的作用范围内使用组件

  <div id="app">
        <cpn></cpn>
    </div>
<script>
const cpnC = Vue.extend({
        template:`<div>
        <p>这是一个标题</p>
        </div>
        `
    })
const app = new Vue({
        el: '#app',
        components: {
            cpn: cpnC
        }
    })
})
</script>

组件的语法糖

Vue.component('cpn', {
        template:`<div>
        <p class="left">看看我的 margin是多少</p>
        <p class="right">看看我的 margin是多少</p>
        <a href="">999</a><a href="">66666</a></div>
        `
    })
//模板分离写法
html 代码可以放在 <template> 标签内 或者 <script type="text/x-template"> 标签内

组件数据存放

Vue.component('cpn', {

template:''，

data(){

　　return {}

}}
组件中data必须是个函数

 

父子组件的通信

　　父向子传递

props:{
//类型限制
cmovies：Array，//限制数组类型
cmovie：[String,Number]，//限制多个类型
cmessage：{
type：String，//限制字符串类型的值
default：‘aaa’//默认值一般类型
//defailt：function（）{//默认值为数组或者对象必须工厂函数获取
//return {}
//}
required：true//必传值，必填字符串
validator：function（）{
return ['success', 'warning'].indexOf(value) !== --1
//自定义验证函数
}
}
}

 注意：props在父级传递不能使用驼峰命名。此处vue版本v2.6.12

<div id='app'>
     <cpn :c-info='info'></cpn> //这里要是注意写法，不能使用cInfo
</div>

 <template id="cpn">
     <div>
      <h3>{{ cInfo }}</h3>
    </div>
   </template>
<script src="js/vue.js"></script>

 Vue.component("cpn", {

   template: '#cpn',
   props:{
    cInfo: {
         type:Object,
         default(){
           return {}
         }
       }
   }
 })
const app = new Vue({
    el:"#app",
    data: {
      info: {
        name:'Hao',
        age: 26,
        height: 1.80
      }
    }
})

 

子组件向父组件传递数据：自定义事件

流程;

　　在子组件中，通过$emit()来触发事件。

　　在父组件中，通过v-on来监听子组件的事件。

<div id="app">
    <cpn @counter-click="cpnClick"></cpn>
</div>

  <template id="cpn">
     <div>
      <button @click="add">++</button>    
    </div>
   </template>
// 子组件
Vue.component("cpn", {
   template: '#cpn',
   data() {
    
   },
   props:{
   },
   methods: {
     add() {
        //发射事件：自定义事件。后面可以添加变量
       this.$emit('counter-click')
     }
   }
 })
//父组件
const app = new Vue({
    el:"#app",
     methods: {
        cpnClick() {
          console.log(99)
        }
      }
  })

tips：

v-model 等于  ：value  + @input

 

父访问子组件：$children 或者 $refs(推荐使用)

this.$chilidren 返回所有子组件。不方便修改。获取全部子组件时使用

$refs:

组件中添加ref  <cpn ref="aaa"></cpn>

方法中即可调用：this.$refs.aaa

子访问父组件：this.$parent

访问根组件：this.$root