vue组件使用细节

ref

当ref写在一个标签元素中，通过this.$refs.name 获取的是标签对应的dom元素

<section id="app"
         ref="froggy"
         @click="handleClick"
>{{name}}</section>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            name:"emit"
        },
        methods:{
            handleClick: function() {
                console.log(this.$refs.froggy)
                alert("this.$refs.froggy")
            }
        }
    })
</script>

当ref写在一个组件上的时候。获取的是一个子组件的引用

<section id="app"
         ref="froggy"
>
    <counter @change="handle" ref="one"></counter>
    <counter @change="handle" ref="two"></counter>
    {{name}}</section>

<script>

    Vue.component("counter", {
        template:"<div @click='handleClick'>{{number}}</div>>",
        data:function() {
            return {
                number: 0
            }
        },
        methods: {
            handleClick: function() {
                this.number++
                this.$emit("change")
            }
        }
    })

    var vm = new Vue({
        el: "#app",
        data:{
            name:"0"
        },
        methods:{
            handle: function() {
                this.name = this.$refs.one.number + this.$refs.two.number
            }
        }
    })
</script>

is = " 子组件名称"(属性)

H5有一些编码规范

<ul> --<li>

<ol> --<li>

<select> --<option>

<table> --<tbody> -- <tr> --<td>

非子组件中定义data要用function + return

子组件不像根组件只调用一次，子组件会被不断调用，不希望子组件中数据冲突

每个子组件都有独立的数据存储，多个子组件间互相影响

父子组件传值

父 --- 子  通过属性形式传递 //  子组件不能修改父组件传递过来的参数（万一是引用类型）

子组件可以在自己的数据内clone一份  然后更改

<article class="app">
    <counter :count="0"></counter>
</article>

<script>

    var counterr = {
        props:["count"],
        template:"<section @click='handle'>{{number}}</section>",
        data: function () {
            return {
                number: this.count
            }
        },
        methods: {
            handle:function() {
                this.number++
            }
        }
    }

    var vm = new Vue({
        el: ".app",
        data:{

        },
        components:{
            counter:counterr
        }
    })
</script>

子组件通过时间触发机制向父组件传值

this.$emit("事件名称"，传递参数，可以多个)

子组件上； @事件名称=“父组件调用的函数”

组件参数校验

父组件向子组件传递参数的时候，子组件可以对数据进行约束

props: {
content: {
         type: String,  类型
         required: false   //must send
         default: "default" //默认值
         validator: function(value) {
         return  value.length > 5 //验证器 true 返回    自定义效验器
}}

非props特性

父子组件之间props有个对用关系  为props特性

• 不会在dom标签上显示
• {{content}}  this.content 可以拿到数据

子组件不定义。不接受父组件传过来content。子组件不能使用数据

会显示在dom中

组件绑定原生事件

< child @click.native="handleClick">  自定义click事件 后面加一个native修饰符。

非父子组件传值

框架

总线/bus/发布订阅模式/观察者模式