vue路由使用以及组件扩展

最新推荐文章于 2024-01-26 15:19:45 发布

VIP文章李时一

最新推荐文章于 2024-01-26 15:19:45 发布

阅读量202

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Llishiyi/article/details/122397554

版权

一，父组件传值子组件

接受父组件传值

设置props属性就可以接受父组件传值

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="./vue-2.4.0.js"></script>
</head>
<body>
    <div id='app'>
        <father></father>
    </div>

    <template id="father">
        <div>
            父组件
            <son from-father="fromFather2"></son>
        </div>
    </template>
    <template id="son">
        <div>
            子组件{
  {fromFather}}
        </div>
    </template>

    <script>
        // 全局注册组件
        Vue.component("father",{
            template:"#father"
        })


        Vue.component("son",{
            template:"#son",
            data(){
                return{
                    msg:"hello"
                }
            },
            // 接受参数
            props:{
                fromFather:{
                    type:[String,Number,Boolean],
                    default:"fromFather"
                }
            },
            created() {
                console.log(this.fromFather);
            },
        })



    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })
    </script>
</body>
</html>

属性继承的特征：

父组件的属性会覆盖子组件的属性

class 和 style 会进行合并，不会覆盖

设置禁用继承

加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外

inheritAttrs: false

在组件内可以使用$attrs获取父组件传过来的属性

示例：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.parent-class {

background-color: bisque;

color: red

}

.son-class {

color: aquamarine

}

</style>

</head>

<body>

<!--

属性继承的特征：

父组件的属性会覆盖子组件的属性

class 和 style 会进行合并，不会覆盖

-->

</div>

<button @click='changeMsg'>修改parentMsg</button>

<h1>你好{ {parentMsg}}</h1>

<ul>

</ul>

</div>

</template>

var vm = new Vue({

el: '#app',

data: {

msg: '这个父组件的数据',

list: [{

{

{

]

components: {

son: {

// 使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外

inheritAttrs: false,

data() {

return {

sonMsg: '你好'

}

methods: {

changeMsg() {

console.log(this.$attr)

console.log(this.parentMsg);

}

props: {

// 可以设置多个类型

parentMsg: [Number, String],

list: {

type: Array,

// 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的

default: function () {

return [{

}]

}

})

</script>

</body>

</html>

注意事项

data和props的区别

data是组件私有的，props是父组件传过来的

data是可以修改的，props是只读的

1.6 子组件传值父组件

子组件调用父组件的方法

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容
在父组件中怎么拿到这内容

2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到

2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

示例：

<!DOCTYPE html>

<head>

<title>组件自定义事件</title>

</head>

<body>

</div>

<div>

<h3>这是子组件的内容</h3>

</div>

</template>

var son = {

methods: {

clickSon() {

console.log('子组件的方法');

// 2. 在子组件中触发这个事件

// 发射，触发

// 通过这种方式，子组件也可以给父组件传值

this.$emit('cli

最低0.47元/天解锁文章

李时一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由使用以及组件扩展

一，父组件传值子组件接受父组件传值设置props属性就可以接受父组件传值示例：属性继承的特征：父组件的属性会覆盖子组件的属性class和style会进行合并，不会覆盖设置禁用继承加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外inheritAttrs: false在组件内可以使用$attrs获取父组件传过来的属性示例：<!DOCTYPE html><html lang=...
复制链接

扫一扫