VUE父子组件通信

最新推荐文章于 2024-04-27 22:13:08 发布

吃瓜的阳大王

最新推荐文章于 2024-04-27 22:13:08 发布

阅读量68

点赞数

文章标签： vue html5 vue.js

本文链接：https://blog.csdn.net/qq_44822110/article/details/104782191

版权

VUE父子组件通信

父子组件通信主要用到 props: [ ]

在HTML页面中给自定义标签添加自定义属性在JS页面中使用props: [’ '] 接收自定义属性

例：

HTML：<自定义标签 username=“qhy”></自定义标签>

JS：props: [‘username’]

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件通信</title>

</head>

<body>
    <div id="seg1">
        //<!-- <alert msg="Yoooo"></alert> -->
        //<!-- 外部向内部组件传值 -->
        //<!-- username的值会传到js里  js里会有 props: ['username'], 来接收通信 -->
        <user username="qhy"></user>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS部分

Vue.component('user', {
    template: '<a :href="\' / user / \'+username">@{{username}}</a>',
    // 父子通信
    // html页面在标签上直接定义属性username
    // props: ['username']这样接收属性 再把username的渲染到template上
    props: ['username'],
    methods: {}
})

var app = new Vue({
    el: '#seg1'
})

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE父子组件通信

VUE父子组件通信父子组件通信主要用到 props: [ ]在HTML页面中给自定义标签添加自定义属性在JS页面中使用props: [’ '] 接收自定义属性例：HTML：<自定义标签 username=“qhy”></自定义标签>JS：props: [‘username’]HTML部分<!DOCTYPE html><html lan...
复制链接

扫一扫