概念组件名的办法有两种:

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时,
你也必须在引用这个自定义元素时使用 kebab-case,
例如

<my-component-name>

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时,
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

传值&传引用:

传值:String Number Boolean

传引用:Array Object 

(如果传的是引用,改变一个地方的数据,所有跟引用相关的数据都会发生变化。如果传的是值,则不会。)

父组件向子组件传值:

    在组件上绑定属性:v-bind:property="value" ,
    其中property为绑定的属性名,value为需要传的值(父组件数据中的属性名)
    在子组件里用props:["property"] 接收父组件传的值,其中property为组件上绑定的属性名

示例:

父组件:

data(){
    return {
        test: [{
            name:  "Amor",
            sex: "man",
            age: 18
        }]
    };
}

组件(组件名为child):

<child v-bind:users="test"></child>


子组件接收值:

props:["users"]

或

props: {
    users: {
        type: Array,
        required:true
    }
}

概念组件名的方法有三种。概念组件名的方法有三种。概念组件名的方法有三种。子组件向父组件传值:

子组件注册事件:

this.$emit(事件名, value);

父组件监听事件:
  组件上:
    v-on:事件名="自定义方法名($event)",
    其中$event接收子组件传过来的值,此参数必须为$event

示例:

①脚手架

子组件:

methods: {
    send(){
        this.$emit(change, "我是传递的值!");
    }
}

组件(组件名为child):

<child v-on:change="receive($event)"></child>

父组件:

methods:{
  receive(data){
    console.log(data); // "我是传递的值!"
  }
}

概念组件名的方法有三种。概念组件名的方法有三种。零件注册&援用:

全局注册:

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册:

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

①脚手架:

import 自定义组件名1 from '组件1路径';
import 自定义组件名2 from '组件2路径';

父组件:

components: {
  自定义组件名1,
  自定义组件名2
}

脚本:

# 注意:
    data
    类型:Object | Function
    限制:组件的定义只接受 function

实例:

# test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="test.js"></script>
</head>
<body>
    <div id="test">
        <test v-bind:title="title" v-on:from_child="getValue($event)"></test>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data(){
            return {
                title: "This is Vue.js!"
            };
        },
        methods:{
            getValue:(data)=>{
                console.log(data);
            }
        }
    });
</script>

#test.js

Vue.component("test",{
    template: ` <div>
                    <p>Hello,world!</p><p>{{test}}</p>
                    <p>{{title}}</p>
                    <button @click="to_parent()">子向父传值</button>
                </div>`,
    props:["title"],
    data(){
        return {
            test: "Vue.js!"
          };
    },
    methods: {
        to_parent:function () {
            this.$emit('from_child',this.test);
        }
    }
});

 

相关文章