vue学习之组件传值、自定义事件

最新推荐文章于 2022-12-08 11:27:23 发布

yoghurt&girl

最新推荐文章于 2022-12-08 11:27:23 发布

阅读量746

点赞数

分类专栏： web前端开发文章标签： vue.js 学习

本文链接：https://blog.csdn.net/ywforever/article/details/127358589

版权

1、静态传值

注意：在template中不要加样式，因为不会起到任何作用他是不会执行的

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

<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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <!-- 静态传值 -->
    <div id="root">
        <!--使用组件 -->
        <com-son movies="狐妖小红娘" haha="我是父组件传过来的一句话"></com-son>

    </div>
    <!-- 子组件html部分 -->
    <template id="myson">
        <div>
            <!-- 静态 -->
            <h1>我是子组件</h1>
            <h1>{
  {movies}}</h1>
            <h1>{
  {haha}}</h1>
        </div>
    </template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            props: ['movies', "haha"],

        }
        const vm = new Vue({
            el: '#root',
            data() {
                return {

                }
            },
            methods: {
            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    </script>
</body>

</html>

效果图：

2、动态传值

要保证父组件里面的变量名=props里面的值=templ中的插值{ {}}

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

<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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <style>
        .fa {
            width: 800px;
            height: 800px;
            background-color: PINK;
            padding: 20px;
        }

        .fa button {
            width: 300px;
            height: 100px;
            margin-top: 20px;
        }

        .son {
            width: 600px;
            height: 600px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="root" class="fa">
        <!-- 动态传值 -->
        <!-- 变量名=“值” -->
        <com-son :message="msg"></com-son>
        <button @click="change">改变msg值</button>
    </div>
    <template id="myson">
        <div class="son">
            <h1>我是子组件</h1>
            <h1>{
  { message }}</h1>

        </div>
    </template>
    <script>
        let ComSon = {