初学Vue组件

组件注册相关

html部分：

全局注册：

​ 全局注册的组件可以在全局任意地方使用。

​ Vue.component('HelloWorld',hellWordd)

​ 第一个参数是要使用的标签名，不管这里是大写或中线，在使用的时候都需要小写加中线。

​ 第二个参数是组件的配置项。

局部注册：

​ 只有当前实例才能使用这个组件，这里是components。

const app = new Vue({
    el:'#app',
    components:{
        HelloWorld
    }
})

配置组件：

​ 大驼峰命名组件，实际上还是一个Vue实例。

const HelloWorld = {
    template: '
how are you

组件配置相关

data:

const HelloWorld = {
    template: '
how are you

组件的data必须是一个方法，return一个对象，因为这样才能保证每个组件的数据是独立的，而不是共享的

组件嵌套相关

配置组件时：

//被嵌套的组件
const HelloDeso = {
    template: '
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quia dolorem magnam deserunt corporis repellendus nam deleniti amet, consectetur ab facilis iusto ea! Dolorum animi omnis corporis maxime asperiores. Expedita.
'
}

const HelloWorld = {
    //一个组件的template必须要有一个唯一的根元素
    template: '
{{ msg }} 
',
    //注册组件
    components:{
        HelloDeso
    },
    data (){
        return {
            msg:'who are you'
        }
    }
}

props

调用组件时，用来获取标签上的属性的值

html：

js:

const MyText = {
  template: '{{text}}',
  // 通过props来接收调用的时候传过来的值。一旦接收了，就可以直接把props当data用，但是不能直接在内部修改props的值。这是基于单向数据流的原则的。
  props: ['text']
}
const app = new Vue({
  el: '#app',
  data: {
    text1: 'hello',
  },
  components: {
    MyText
  }
})

props的几种写法：

props:['x','y']

//可对传入的props进行类型的检测
props:{
    x:Number,
    y:Number
}

//如果要对传入的值进行更多的约束，还可以把传入值写成一个对象。
props:{
    x:{
        type:Number,//类型
        required:true,//必传可选
        default:0,//初始值
    }
    y:{
        type:Number,
        required:false,
        default:0,
    }
}

props的坑：

js中是驼峰命名法，接收时使用驼峰

props:['textContent']

而在html中时忽略大小的，如果写成驼峰，并不能被识取到，所有此时要使用中线连接

单项数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来就不行。

例子：

const Hello = {
    //用props获取的helloText来渲染
    //当点击改文字button时执行changeHelloText方法
    template: `

                {{ helloText }}
                
                    改文字
                
                
`,
    //获取hello标签上的hello-text的值
    props: ['helloText'],
    methods: {
        changeHelloText () {
            //不能写直接写 this.helloText = 'xxxx' 这是因为单向数据流的原因。
            //要修改就找到data定义的地方
            //this.$emit自定义一个事件，并把需要修改的值带上
            //changeHelloText触发时，自定义事件也会触发
            this.$emit('change-text','who are you')
        }
    }
}

const app = new Vue({
    el:'#app',
    data:{
        text:"hello word"
    },
    methods:{
        onChangeText (text) {
            //改变text值
            //text为自定义事件传的值
            this.text = text
        }
    },
    //组件注册
    components:{
        Hello
    }
})

bus

同级组件要相互发生关系时，需要定义一个事件总线，事件总线什么都不渲染，只是一个空的实例。

//事件总线
const bus = new Vue()
//大哥
const Dage = {
    //兄弟组件，不能直接通信，一种方式时告诉父级进行传递，一般不会这么做
    //一种是通过事件总线完成
    //点击呼叫二弟按钮后，执行jiaoerdi事件
    template: `

                    这是大哥
                    
                        呼叫二弟
                    
                
`，
    methods:{
    jiaoerdi(){
        //告诉bus，我发一个命令，叫hujiao
        bus.$emit('hujiao')
    }
}
}
//二哥
const Erge ={
    //当ting为true时就显示  听见了
    template:`

                这是二哥
                
                {{daying}}
                
            
`,
    data () {
        return {
            daying:'听见了',
            ting:false
        }
    }
//监听一下bus里的事件
    created (){
        //接收到bus里的hujiao命令时，改变this.ting的状态
        bus.$on('hujiao',() => {
            this.ting = true
        })
    }
}
const app = new Vue({
    el:'#app',
    //注册组件
    components:{
        Dage, //组件1
        Erge    //组件2
    }
})